时间戳

首页 > 解决方案 > Vuejs - 观察者观察不够深入

vue.js - Vuejs - 观察者观察不够深入

问题描述

出于某种原因，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 手动更改最后一项内容中的最后一个内容，但它仍然不起作用。

标签： vue.jswatch

解决方案

我已经想通了。事实证明，它正在readonly导致我的问题。我刚刚通过以下方式创建了一个解决方法：

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

现在，观察者可以正常工作。

推荐阅读