Question

我有一个Vue.js项目，其中用户可以从select输入元素中选择一个项目（app）。它使用数据部分中指定的apps数组。所有这一切都正常。

    <div class="large-8 columns" v-if="selectedAppId">
      {{selectedApp.name}}
    </div>
    <div class="large-8 columns" v-else>
      <select v-model="selectedAppId" name="timeline_event[site_id]">
        <option value=null>Select One</option>
        <option v-for="app in apps" :value="app.id" :key="app.id">{{app.name}}</option>
      </select>
    </div>
  </div>

我希望能够从apps数组中返回selectedApp并输出名称，如上面条件的第一部分所示。

我不确定计算属性是否是正确的方法 - 我也尝试过一种方法，这是有问题的。在下面，从apps数组中选择了正确的应用程序，但是没有呈现selectedApp.name，我收到一条错误，指出“无法读取未定义的属性'名称'”。

在我的console.log中，它正在输出 ob 观察者。我显然没有正确地做到这一点。这样做的正确方法是什么？

  computed: {
    selectedApp(){
      console.log('here is selectedAppId ' + this.selectedAppId)
      this.apps.forEach((app) => {
        if(app.id == this.selectedAppId){
          console.log('a hit');
          console.log(app)
          return app
        }else{
          console.log('a miss');
        }
      })
    },
  },

Answer 1

我认为您不需要forEach循环，只需找到selectedAppId（填充app.id）和app

new Vue({
  el: "#app",
  data() {
    return {
      selectedAppId: '',
      apps: [{ id: 1, name: "App1" }, { id:2,  name: "App2" }, { id: 3,  name: "App3" }]
    }
  },
  computed: {
    selectedApp(){
      return this.apps.find(app => app.id == this.selectedAppId )
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <div class="large-8 columns" v-if="selectedAppId">
      {{ selectedApp.name }}
    </div>
    <div class="large-8 columns" v-else>
      <select v-model="selectedAppId" name="timeline_event[site_id]">
        <option value=null>Select One</option>
        <option v-for="app in apps" :value="app.id" :key="app.id">{{app.name}}</option>
      </select>
    </div>
</div>

计算属性未在Vue.js中返回正确的值

1 个答案: