Vuejs - 观察者看得不够深

Question

出于某种原因，Vuejs 并没有深入观察变化。让我们说下面是我正在观看的数据。

input_collection: [
    {
        type: 'foo',
        value: 'foo'
    },{
        type: 'bar',
        value: 'bar'
    },{
        type: 'baz',
        value: 'baz'
    }
]

基本上它是一个对象数组。当我更改除最后一项以外的任何内容时，它会触发手表完成其工作。但是当最后一项更新时，它没有。

我更改 input_collection 内容的方法是使用 v-model 并直接更改代码中的值。我也怀疑直接更改方法是罪魁祸首，因为我只在最后一项中使用了它并且输入具有只读属性，但是由于我直接为项目的内容分配了一个新值，所以不应该是个问题。

//via v-model
<input :type="type" v-model="title"/>

//via directly changing
<input type="type" :value="value" readonly>
//js
this.input.title = new_value;
this.value = new_value;

我尝试通过 Vue Devtools Extension 手动更改最后一个项目的内容中的最后一个内容，但它仍然不起作用。

Answer 1

我想通了。结果是 readonly 导致了我的问题。我刚刚通过以下方式创建了一个解决方法：

//markup
<input type="text" v-model="input.value" @keypress.prevent>
//js
this.input.value = new_value

现在，watcher 正常工作了。

Vuejs - 观察者看得不够深

Vuejs - Watcher not watching deep enough

vue.js

watch