vue.js - 防止 Vue 中的 v-model 更改

Question

我在 data() 方法的数组中存储了一个任务列表。

当对象通过 v-model 指令链接时，有没有办法可以阻止/逆转对对象的更改？

例如(在组件中):

<template>
    <tr v-for="task in tasks" :key="task.id">
        <input @change="complete(task)" v-model="task.complete" type="checkbox" name="complete">

        <td>{{ task.summary }}</td>
    </tr>
</template>

<script>
export default {
    props: ['allowChanges'],

    data() {
        return {
            tasks: [],
        };
    },

    methods: {
        complete(task) {
            if (this.allowChanges) {
                // axios.post() etc.
            } else {
                // This doesn't work:
                task.complete = !task.complete
            }
        },
    }
}
</script>

我尝试过使用观察程序和方法，但似乎无法撤消/取消使用 v-model 指令进行的更改？

Answer 1

当不允许更改时禁用输入。

<input @change="complete(task)" v-model="task.complete" type="checkbox" name="complete" :disabled="!allowChanges">