javascript - vue js 不会立即触发

Question

我的 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/

Answer 1

当您在响应式(Reactive)测试中使用动态添加到对象的属性时，会发生此行为。 Vue 只在原始数据上设置观察者。如果你想让 Vue 在 react 检查中包含新的对象属性，你需要指示 Vue 使用 Vue.set 来监视它们。方法。例如，要在您的 valueChanged 方法中实现此目的:

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

您不需要修改更新方法，因为一旦由 valueChanged 方法创建，属性就会 react 。您还可以使用默认值向原始对象添加“已更改”和“已更新”属性，以获得相同的结果。