Question

我找不到在v-for循环中更改属性值的解决方案。

例如，我希望index成为相关产品的名称：

HTML

<div v-for="(index, publication) in publications">
  {{ index | name publication.productId }}
</div>

JS

 filters: {
      name: function(val, productId) {
        this.$http.get('/api/product/'+productId)
          .then(function(rst) {
          return rst.data.name;
        }).catch(function(err) {
          console.error(err);
        });
      }
    },

请求返回名称，但它不会附加在HTML模板中，我猜是因为过滤器是同步的。

如果有人有解决方案，我找不到一个：/

Answer 1

我认为过滤器是您尝试做的错误工具。通常，如果你想要一个基于另一个元素的值的元素，你会使用一个计算，但我认为计算的异步种群将成为一个问题。您需要使用真实的data项，并将其填充到watch publications中。类似的东西：

data: {
  ...
  productData: []
},
watch: {
  publications: function (newValue) {
    this.productData = [];

    this.publications.forEach((pub, i) => {
      this.$http.get('/api/product/'+pub.productId)
      .then((rst) => {
        this.productData[i] = rst.data.name;
      }
    });
  }
}

然后你的for会像：

<div v-for="name in productData">
  {{ name }}
</div>

在v-for循环中使用ajax更改值

1 个答案: