VueJS - 在v-for循環中啓動一個方法

在VueJS我運行v-for列出了幾個項目。例如：

v-for="item in cart" 

Bananas - 1 dollar - Yellow 
Apples - 2 dollar - Pink 
Grapes - 1.5 dollar - Green

同時列出這些項目，每個項目都有一個文本框，在那裏我可以輸入註釋。問題是，我不想將此筆記保存在購物車中的物品對象中。我想將這些筆記保存在另一個Vue數據對象中（註釋）。保留對原始項目的引用會很好，但這不是必需的。

我認爲這將是很好，使一個方法成爲可能。但是我不想在每個生成的listitem上運行這種方法。所以我的問題：

如何在運行v-for循環時自動觸發Vue方法？（沒有ie @click）

來源

2016-02-11 Milkmannetje

這並不回答你的具體問題（如何觸發一個方法）......但你可能能夠解決你的問題，使用數據綁定。

的Javascript

new Vue({ 
    el: '#app', 
    data: { 
     cart: [ 
      { name: 'banana', color: 'yellow'}, 
      { name: 'apple', color: 'red'}, 
      { name: 'lime', color: 'green'}, 
     ], 
     notes: [] 
    } 
})

HTML

<div id="app"> 
    <div v-for="item in cart"> 
     {{ item.name }} - {{ item.color }}<br/> 
     <input type="text" v-model="notes[$index]"/> 
    </div> 

    <pre>{{ $data | json }}</pre> 
</div>

或者，如果你希望你的notes是一個對象，你可以改變input這樣：

<input type="text" v-model="notes[item.name]"/>

這裏有一個jsfiddle 。

來源

2016-02-11 16:00:07 Peter

VueJS - 在v-for循環中啓動一個方法

回答

相關問題