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