Vue.js 在 v-for 中使用方法

Question

我想在我的 Vue 组件的 v-for 中运行一个方法。 示例：

<div v-for="(foo,index) in bar">
      <p>{{myMethod(foo,index)}}</p>
</div>

当我这样做时，p-tag 只是保持为空。这是我的方法（带有 axios 调用）：

 myMethod:function(foo,index) {
    axios.get('/myAjaxCall')
    .then((response)=> {
        //works perfectly
        alert(response.data);
        return response.data;

    })
    .catch(function (error) {
        console.error(error);
    });
   },
 }

当我alert( SomethingWithFooAndIndex) 时，浏览器正在显示我所需要的内容。当我删除 axios 调用时，该方法似乎有效

谢谢！

Answer 1

我认为你不应该在v-for 中使用myMethod

axios 是异步的

尝试用另一种方法做myMethod和bar，得到一个数据newbar，可以渲染newbar

<div v-for="(foo, index) in dataBar"> <p>{{otherSimpleMethod(foo, index)}}</p> </div>

1. 在数据中添加dataBar
2. 用另一种方法newMethod 用变量bar 做myMethod
3. 更新dataBar（axios 响应）在newMethod
4. 在mounted 中执行newMethod（我猜你想在页面加载后执行此操作）

或者你可以试试nextTick

顺便说一句，标题Vue.js Use mounted in v-for ???也许Vue.js Use method in v-for???

Answer 2

您的代码有问题。你错过了一个报价 <div v-for="(foo,index) in bar"> <p>{{myMethod(foo,index)}}</p> </div>

请参考以下jsbinhttp://jsbin.com/wovavut/edit?html,js,output

Answer 3

我也不认为您应该使用v-for 中的方法，而是使用计算属性，将您的方法应用于可能位于data 某处的未处理项目数组：

Vue.js 2: Computed