vue js 不会立即触发答案

【问题标题】：vue js doesn't trigger immediatelyvue js 不会立即触发
【发布时间】：2018-08-20 08:07:23
【问题描述】：

我的 HTML 代码：

<div id="app">
<table>
    <thead>
    <tr>
        <th>#</th>
        <th>title</th>
        <th>price</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="wage_definition in wage_definitions" :key="wage_definition.id">
        <td>{{ wage_definition.id }}</td>
        <td>{{ wage_definition.definition_title }}</td>
        <td>
            <input type="text" name="amount" @change="valueChanged(wage_definition)"
                   v-model.lazy="wage_definition.amount">
            <button v-if="wage_definition.changed" class="btn btn-sm btn-success"
                    @click="update(wage_definition)">save change
            </button>
            <span v-if="wage_definition.updated" class="label label-success">updated</span>
        </td>
    </tr>
    </tbody>
</table>

而我的js代码是：

var app = new Vue({
    el: '#app',
    data: {
        wage_definitions: [{
            "id": 1,
            "definition_title": "first",
            "amount": 151,
            "created_at": null,
            "updated_at": "2018-03-12 14:34:27"
        }, {
            "id": 2,
            "definition_title": "second",
            "amount": 152,
            "created_at": null,
            "updated_at": "2018-03-12 14:34:34"
        }, {
            "id": 3,
            "definition_title": "another record",
            "amount": 0,
            "created_at": null,
            "updated_at": null
        }, {
            "id": 4,
            "definition_title": "hello",
            "amount": 0,
            "created_at": null,
            "updated_at": null
        }, {
            "id": 5,
            "definition_title": "world",
            "amount": 0,
            "created_at": null,
            "updated_at": null
        }, {
            "id": 6,
            "definition_title": "foo bar",
            "amount": 0,
            "created_at": null,
            "updated_at": null
        }]
    },
    methods: {
        valueChanged: function (wage_definition) {
            wage_definition.changed = true;
            wage_definition.updated = false;
        },
        update: function (wage_definition) {
            wage_definition.changed = false;
            wage_definition.updated = true;
        }
    }
});

在我更改输入值后，将显示“保存更改”按钮，但是当我单击“保存更改”按钮时，“更新”警报不会立即显示。我必须更改另一个字段，然后显示“更新”警报。

我怎样才能马上做到？

这里是 jsfiddle 链接： https://jsfiddle.net/5qupbc3w/1/

【问题讨论】：

呃……你为什么把它命名为vue？你知道 Vue 使用它吗？
JavaScript 是一种区分大小写的语言。我觉得不重要
你没有在听。 Vue 使用 vue 变量...
我把它重命名为 app.但是这个问题没有解决。

标签： javascript php laravel vue.js

【解决方案1】：

当您在反应式测试中使用动态添加到对象的属性时，会发生此行为。 Vue 只对原始数据设置观察者。如果您希望 Vue 在响应式检查中包含新的对象属性，您需要指示 Vue 使用 Vue.set 方法监视它们。例如，要在您的 valueChanged 方法中实现这一点：

valueChanged: function (wage_definition) {
    Vue.set(wage_definition, "changed",true);
    Vue.set(wage_definition, "updated",false);
}

您不需要修改 update 方法，因为这些属性在由 valueChanged 方法创建后是反应式的。您还可以使用默认值向原始对象添加“更改”和“更新”属性，以达到相同的结果。

【讨论】：