Javascript Vue.js$set未更新显示

我在使用$set（）时遇到问题，我做了一个错误。当

addQty2

仅更新数据时，

addQty1

工作并更新显示

知道为什么会这样吗

var TicketLine=Vue.extend({
模板：“#ticketLineTemplate”，
道具：[“索引”，“行”]，
数据：函数（）{
var line=this.lines[this.index]；
返回{
数量：行数量，
标签：line.label
};
},
方法：{
addQty1:function（）{
var line=this.lines[this.index]；
行数量++；
this.lines.$set（this.index，$.extend（{}，line））；
},
addQty2:function（）{
var line=this.lines[this.index]；
行数量++；
this.lines.$set（this.index，line）；
}
}
});
变量行=[{
数量:1，
标签：“比萨饼”
}, {
数量:2，
标签：“咖啡馆”
}, {
数量:1，
标签：“苏打水”
}];
新Vue({
el:“应用程序”，
数据：{
台词：台词
},
组成部分：{
“票务线”：票务线
}
});

数量
标签
行动
{{qty}
{{label}}
addQty1
addQty2

实际上没有理由将所有行作为道具传递给每一行，只需传递当前行即可。子组件不需要知道所有行：

<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++;
    }
}
});

---

编辑2：测试后，该代码对我不起作用。我认为最好的解决方案是重构您的结构，使每一行都是一个只了解自身的组件。我知道你说在你的应用程序中有这样的原因，但应该有另一个更合适的解决方案。组件不需要知道整个阵列，这就是组件的概念。如果需要交互，您可以使用

.sync

或事件广播。无论如何，很抱歉，我无法使代码正常工作，希望您能解决此问题。

由于超出本主题范围的特定原因，我通过了所有行，我已经阅读了您链接到我的《反应性指南》，但仍然无法理解，$set（）被支持触发更改检测。我遗漏了什么吗？请参见对象上的编辑-

$set

不会触发更改，但是

数量

属性上的

$set

会是，它仍然不工作，可能结构需要更改。如果找不到其他解决方案，A将支持您的解决方案，谢谢@Jeff

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