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

我有一个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>

我想你不需要forEach循环，只需要找到你选择的appid和app.id之间的匹配

新Vue{ el:应用程序， 资料{ 返回{ selectedAppId:， 应用程序：[{id:1，名称：App1}，{id:2，名称：App2}，{id:3，名称：App3}] } }, 计算：{ 选定的应用程序{ 返回this.apps.findapp=>app.id==this.selectedAppId } } } {{selectedApp.name} 选择一个 {{app.name}

---

您是否尝试对变量selectedAppId使用watcher？看起来它将是您的用例thx@CaShiS的最佳选择-我没有。让我试试。仍在尝试找出处理Vue部分的最佳方法。首先，将“选择一”更改为“选择一”，这将阻止此选项被选中，然后导致selectedAppId为空。然后计算：{selectedApp{}未返回一个值，请使用Array.find比Array.forEach更好，如下所示为@sovalina在您的案例中的答案。

  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');
        }
      })
    },
  },