Vue的JS V-ATTR =「表達」

Question

使用VUE JS，我試圖禁用一個按鈕，如果該項目的數量小於1

<div v-repeat = "item: itemsList"> 
<button v-attr="disabled: {{item.qty}} < 1"> Click </button> 
...... 

它不工作，沒有什麼正在顯示。但是，當我把一個正常的表達式，如：

<div v-repeat = "item: itemsList"> 
<button v-attr="disabled: 0 < 1"> Click </button> 
...... 

它的工作正常！

任何人都可以解釋爲什麼我無法在我的情況下使用該屬性？有沒有辦法做到這一點？

Answer 1

試試這樣說：

<button v-attr="disabled: item.qty<1"> Click</button> 

演示小提琴：

http://jsfiddle.net/yMv7y/721/

Answer 2

您的代碼不工作並不是因爲與{{}}語法，但因爲裏面的V-ATTR laravel衝突指令不需要該值的句柄語法，因爲它會直接評估表達式。

請注意，如果您使用的是laravel，並且需要使用@ {{}}在括號內顯示某些內容。 '@'告訴刀片忽略該表達式，因此vue實例可以處理它。

Answer 3

有關伊萬的回答矯治，語法已經改變，所以我相應地更新小提琴：http://jsfiddle.net/yMv7y/1734/

<div id="demo" v-for="item in itemlist"> 
    <button :disabled="item.qty < 1"> Click</button> 
</div> 

[編輯]現在，這適用於Vue的2.0+

<div id="demo"> 
    <button v-for="item in itemlist" :disabled="item.qty < 1"> Click</button> 
</div>  

http://jsfiddle.net/yMv7y/2022/