Vue.js - 从方法计算的值不会显示在循环列表中答案

【问题标题】：Vue.js - calculated value from method doesn't display in looped listVue.js - 从方法计算的值不会显示在循环列表中
【发布时间】：2020-11-18 10:56:53
【问题描述】：

我觉得这是一个计时的事情，但不一定是异步的事情。我正在循环一个对象并显示一个项目列表。对于其中一个值，我需要用一种方法来计算。

直接在项目对象上显示的值很好，但计算出来的值永远不会显示，即使我可以 console.log 它并且它就在那里。

我正在尝试更改键顶部以重新呈现列表，但没有运气。我尝试将其设为计算属性，但遇到了“不是函数”的问题。

<ul>
  <li
    v-for="(item, index) in list"
    :key="index"
    class="list-wrap"
  >
    <span> 
      {{ item.name }} <---- this value shows every time.
    </span>
      <span class="location">
        {{ getLocation(item.Location[0]) }} <---- this "calculated" value returns only sometimes.
      </span>
  </li>
</ul>

getLocation 方法：

methods: {
  getLocation(loc) { // id coming from item in loop
    this.locations.forEach((location) => { // loop through locations obj, match id, return location name.
      let match;
      if (location.id === loc) {
        match = location.name;
        console.log(match); <---- present / correct on every refresh
        return match; <--- not rendering
      }
    });
  },
},

// 列表是在异步 api 调用中创建的

async getCurUserTransfers() {
  await airtableQuery
    .getTableAsync("Transfers", 100, "Grid view")
    .then((data) => {
      this.list = data.filter( // list is a filtered table.
        (transfer) =>
          transfer.fields.User === this.curUserNicename ||
          transfer.fields.User === this.curUserDisplayName
      );
    });
},

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component v-for

【解决方案1】：

计算字段的最佳做法是使用计算属性，因此您应该添加一个名为 listWithLocation 的计算属性，然后循环遍历它：

computed:{
     listWithLocation(){

     return this.list.map( item=>{
        item.itemLocation=this.getLocation(item.Location[0]);// add field itemLocation and use the method already defined
         return item;
    }) 
}
}

模板：

<ul>
  <li
    v-for="(item, index) in listWithLocation"
    :key="index"
    class="list-wrap"
  >
    <span> 
      {{ item.name }} 
    </span>
      <span class="location">
        {{item.itemLocation}}
      </span>
  </li>
</ul>

方法：

methods: {
  getLocation(loc) { 
    return this.locations.find((location) => { // this returns the matched location
     
     return location.id === loc;
      
    });
  },
},

【讨论】：

问题是，v-for 循环的对象与我循环查找匹配的对象不同。我会看看我是否可以让它工作。模板 v-for 循环需要是“列表”对象，而要检查的对象需要是“位置”对象。
我认为问题出在方法上
我的代码比我给出的示例要复杂一些，所以我正在使用您的代码，看看我是否可以让它工作。主 v-for 列表（代码中的 listWithLocation）在异步 api 调用中的 created() 处生成。因此，在计算的道具列表中最初是未定义的，然后出现在 updated() 上。我收到"TypeError: this.list.map is not a function" 错误。我不确定如何让计算的道具等到更新。
list 是一个对象吗？如果是，请提供一个 sn-p
我在原始问题的底部添加了 api 调用方法（称为 created()）。

【解决方案2】：

您在方法中嵌套的匿名函数中的 return 语句。所以，主函数没有返回值。

如果您需要计算域，则必须在称为computed 的特定数组中声明计算域。 https://vuejs.org/v2/guide/computed.html

【讨论】：