计算属性在 Vue.js 中没有返回正确的值答案

【问题标题】：computed property not returning correct value in Vue.js计算属性在 Vue.js 中没有返回正确的值
【发布时间】：2018-10-21 04:00:12
【问题描述】：

我有一个 Vue.js 项目，用户可以从选择输入元素中选择一个项目（应用程序）。它使用数据部分中指定的应用程序数组。所有这些都正常工作。

    <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>

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

我不确定计算属性是否是执行此操作的正确方法 - 我也尝试过作为方法，但这是有问题的。在下文中，从应用程序数组中选择了正确的应用程序，但我没有渲染出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');
        }
      })
    },
  },

【问题讨论】：

您是否尝试对变量 selectedAppId 使用观察器？看起来它将是您用例的最佳选择vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property
谢谢@CaShiS - 我没有。让我试试。仍在尝试找出处理部分 Vue 的最佳方法。
首先，将<option value=null>Select One</option>更改为<option value="" disabled>Select One</option>，它将阻止选择此选项然后导致selectedAppId为空。然后computed: { selectedApp(){} 没有返回一个值，使用Array.find 比Array.forEach 更好，如下@sovalina 的答案。

标签： javascript vue.js vuejs2

【解决方案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>

【讨论】：