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

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

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

您无需修改更新方法，因为属性在valueChanged方法创建后才会被激活。您还可以使用默认值将“已更改”和“已更新”属性添加到原始对象，以获得相同的结果。

vue js不会立即触发

1 个答案: