вычисляемое свойство не возвращает правильное значение в Vue.js

Question

У меня есть проект 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 из массива apps и вывести имя, как показано в первой части условного выражения выше.

Я не уверен, является ли вычисленное свойство правильным способом сделать это - я также пробовал в качестве метода, и это было проблематично. Далее в массиве приложений выбрано правильное приложение, но вместо рендеринга selectedApp.name я получаю сообщение об ошибке «Невозможно прочитать свойство« имя »из неопределенного».

В моем файле console.log выводится ob Observer. Я явно не делаю это правильно. Каков будет правильный способ сделать это?

  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>