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">

Answer 2

您可以简单地使用v-model.lazy来做到这一点。

let vm = new Vue({
  el: "#view",
  data: {
    data: "",
  },
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="view">
  <input type="text" v-model="data" placeholder="This is automatic" />
  <input type="test" v-model.lazy="data" placeholder="Press Enter after writing">
  <br>
  <p>{{ data }}</p>
</div>

防止Vue中的v模型更改

2 个答案: