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

Posted 2023-02-16

【中文标题】Vue.js - 从方法计算的值不会显示在循环列表中

【英文标题】：Vue.js - calculated value from method doesn't display in looped list

【发布时间】：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
      );
    );
,

【参考方案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