Vue.js $設置爲不更新顯示

Question

我在使用vuejs 1.0 $集（）的麻煩，我已經做出了jsfiddle。當addQty1工作並更新顯示，當addQty2只更新數據。

任何想法爲什麼會發生這種情況？

var TicketLine = Vue.extend({ 
    template: '#ticketLineTemplate', 
    props: ['index', 'lines'], 
    data: function() { 
    var line = this.lines[this.index]; 
    return { 
     qty: line.qty, 
     label: line.label 
    }; 
    }, 
    methods: { 
    addQty1: function() { 
     var line = this.lines[this.index]; 
     line.qty++; 
     this.lines.$set(this.index, $.extend({}, line)); 
    }, 
    addQty2: function() { 
     var line = this.lines[this.index]; 
     line.qty++; 
     this.lines.$set(this.index, line); 
    } 
    } 
}); 

var lines = [{ 
    qty: 1, 
    label: 'Pizza' 
}, { 
    qty: 2, 
    label: 'Café' 
}, { 
    qty: 1, 
    label: 'Soda' 
}]; 

new Vue({ 
    el: "#app", 
    data: { 
    lines: lines 
    }, 
    components: { 
    'ticket-line': TicketLine 
    } 
}); 

<div id="app"> 
    <div id="ticket"> 
    <table class="table"> 
     <thead> 
     <th>Qty</th> 
     <th>Label</th> 
     <th>Actions</th> 
     </thead> 
     <tbody> 
     <template v-for="line in lines"> 
      <ticket-line :index="$index" :lines="lines"></ticket-line> 
     </template> 
     </tbody> 
    </table> 
    </div> 

    <script type="text/x-template" id="ticketLineTemplate"> 
    <tr> 
     <td>{{ qty }}</td> 
     <td>{{ label }}</td> 
     <td> 
     <button type="button" v-on:click="addQty1()">addQty1</button> 
     <button type="button" v-on:click="addQty2()">addQty2</button> 
     </td> 
    </tr> 
    </script> 
</div> 

Answer 1

還有的實在沒有理由通過所有行的每一行作爲一個道具，只是通過當前行。子組件並不需要知道所有的線路：

<ticket-line :index="$index" :line="line"></ticket-line> 

var TicketLine = Vue.extend({ 
template: '#ticketLineTemplate', 
props : ['index', 'line'], 
data: function() { 
    return { 
     qty: this.line.qty, 
     label: this.line.label 
    }; 
}, 
methods: { 
    addQty1: function() { 
     this.qty++; 
    } 
} 
}); 

https://jsfiddle.net/6zovax1v/1/

至於爲什麼你有這個問題，請閱讀「變化檢測注意事項」的信息http://vuejs.org/guide/reactivity.html。

編輯：對象沒有深深的關注。所以當你更新對象qty屬性，然後$set對象時，Vue說：「好的，這是它以前的同一個對象，不需要更新任何東西」。當您創建一個新對象時，Vue會看到一個新對象並知道它需要更新。

我相信你可以直接在應觸發更新項目的性質使用$set：

addQty1: function() { 
     var qty = this.lines[this.index].qty; 
     qty++; 
     this.lines[this.index].$set('qty',qty); 
     ); 
    }, 

編輯2：測試後，該代碼是不是爲我工作。我認爲這裏最好的解決方案是重構你的結構，使每一行都是隻知道自己的組件。我知道你說在你的應用中有這個原因，但應該有另一種更合適的解決方案。組件不需要知道整個數組，這就是組件的概念。如果需要互動，您可以使用.sync或事件廣播。無論如何抱歉，我無法讓代碼工作，希望你解決這個問題。