Vue.js

Question

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

直接在项目对象上的值显示正常，但计算的值从未显示，即使我可以 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
      );
    });
},

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

Answer 2

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

如果你需要一个计算字段，你必须在特定的数组中声明计算字段，该数组被称为computed。 https://vuejs.org/v2/guide/computed.html

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

Vue.js - calculated value from method doesn't display in looped list

javascript

vue-component

vuejs2

v-for