Vue.js中计算属性无法返回正确选中App值的问题求助

哦，我一眼就看出问题所在了！你的计算属性selectedApp里用了forEach遍历数组，但forEach内部的return并不会让整个计算属性函数返回值——这就导致selectedApp最终返回的是undefined，自然会出现"Cannot read property 'name' of undefined"的错误。

问题根源 #

forEach的作用只是遍历数组执行回调，回调里的return只会跳过当前循环，不会把值返回给外层的selectedApp函数。所以你的计算属性实际上没有返回任何有效数据，默认就是undefined。

正确的实现方式 #

我们应该用Array.prototype.find()方法，它会返回数组中第一个满足匹配条件的元素，完全符合我们找选中App的需求。同时还要处理初始状态（比如还没选择任何App的时候），避免找不到匹配项的情况。

修正后的计算属性代码：

computed: {
  selectedApp() {
    // 处理未选择的情况，直接返回null
    if (!this.selectedAppId) {
      return null;
    }
    // 用find找到第一个id匹配的App对象
    return this.apps.find(app => {
      // 注意：select的value会自动转成字符串，如果你的app.id是数字，建议转成字符串再比较，避免类型不匹配
      return String(app.id) === this.selectedAppId;
    }) || null; // 找不到匹配项时也返回null
  }
}

额外的优化建议 #

1. 修正下拉框的默认选项：HTML里的value=null实际上会被解析成字符串"null"，建议改成value=""，同时把selectedAppId的初始值设为空字符串""，这样类型更统一：

<select v-model="selectedAppId" name="timeline_event[site_id]">
  <option value="">Select One</option>
  <option v-for="app in apps" :value="app.id" :key="app.id">{{app.name}}</option>
</select>

在你的data中：

data() {
  return {
    selectedAppId: "",
    apps: [...]
  }
}

2. 模板渲染的小优化：你可以把模板里的v-if="selectedAppId"改成v-if="selectedApp"，这样逻辑更直观，因为我们直接判断是否拿到了有效的App对象：

<div class="large-8 columns" v-if="selectedApp">
  {{selectedApp.name}}
</div>
<div class="large-8 columns" v-else>
  <!-- 下拉框代码 -->
</div>

关于Observer的说明 #

你console.log里看到的ob Observer是Vue对响应式数据的包装，是正常现象，说明你的apps数组已经被Vue处理成响应式数据了，不用在意这个，只要我们能正确拿到App对象并访问它的属性就没问题。

内容的提问来源于stack exchange，提问作者timpone