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