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

Question

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

OR

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

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

当我 myMethod:function(foo,index) { axios.get('/myAjaxCall') .then((response)=> { //works perfectly alert(response.data); return response.data; }) .catch(function (error) { console.error(error); }); }, } 时，浏览器正在显示我需要的内容。当我删除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

我认为你不应该在myMethod

中使用v-for

axios是异步的

尝试在另一种方法中使用myMethod执行bar，获取数据newbar，您可以呈现newbar

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

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

或者您可以尝试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