Vue.js v-for的使用方法

Question

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

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

当我这样做时，p标签只是保持空白。这里是我的方法（与爱可信调用）：

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

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

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

Answer 2

我不认为你应该在v-for

axios使用myMethod是异步

尝试其他方法来执行myMethod与bar，得到一个数据newbar，你可以渲染的newbar

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

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

或者你可以尝试nextTick

BTW，标题Vue.js Use mounted in v-for ???也许Vue.js Use method in v-for ???

Answer 3

我也不相信你应该在v-for使用的方法，而是采用适用的方法，你的项目的未处理阵列可能某处坐在data一个计算性能：

Vue.js 2: Computed