在Vue中防止v模型更改

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-模型指令做出扭转/取消更改？

Answer 1

不允许更改时禁用输入。

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