Vue.js VueJs 2-强制复选框DOM值以尊重数据值

我一辈子都搞不清楚这件事

摆弄：

我想要

用户单击复选框

然后根据不同的条件

复选框

calculatedCheckedValue

返回真/假的数据属性/v模型

检查状态反映了计算的检查值

我可以得到：

calculatedCheckedValue

正确计算和插值

但我在以下方面失败：

使用：checked属性在DOM中正确呈现

calculatedCheckedValue

e、 g.如果单击

false

复选框，并且

calculatedCheckedValue

仍返回

false

，则复选框在屏幕上在选中和未选中之间切换

我试过了：

使用带有自定义

set

的

v-model

进行计算并设置自定义

get

返回的本地状态

使用

@change.prevent.stop=“updateCalculatedValue”

和

：checked=“calculatedValue”

假设@change发生在@click之后（我认为这是错误的），并使用

@click.prevent.stop=“updateCalculatedValue”

和

：checked=“calculatedValue”

模型正在工作，并将计算值呈现为DOM跨度中的字符串， 但检查值似乎不符合模型值

---

有人能帮我吗？

我已经在以下位置解决了这个问题：

据我所知，click事件甚至是由键盘事件（）触发的

并且发生在@change或@input事件（）之前

因此，您可以单击.protect事件，但您需要有选择地阻止它或在计算后重新触发事件

//HTML Template            
<input :checked="calculatedValue5" @click="correctAnswer" type="checkbox">


//VUE component

data() {
    return {
      calculatedValue5: false,
    };
},      

methods: {
    correctAnswer(e){
            const newDomValue = e.target.checked;
            this.calculatedValue5 = this._calculateNewValue(newDomValue);
            if(this.calculatedValue5 !== newDomValue){
                e.preventDefault();
            }
        }
}

//HTML模板
//VUE组件
数据（）{
返回{
计算值5:false，
};
},      
方法：{
答覆（e）{
const newDomValue=e.target.checked；
this.calculatedValue5=this.\u calculateNewValue（newDomValue）；
if（this.calculatedValue5！==newDomValue）{
e、 预防默认值（）；
}
}
}

---

我认为这会阻止复选框值在数据值之前更新，这似乎会破坏反应性。我不确定技术原因，但演示确实有效

“有人能帮我一下吗？”——恐怕不是没有看到你的代码。我很害怕。我很快会在codesandbox上放一些东西。谢谢你，我建议你创建一个。你可以用它作为一个起点。谢谢你的开始文斯，我想我现在已经开始尝试了：你的用例是什么，@Nathaniel Rink？这个想法似乎是选择性地覆盖用户对复选框所做的操作，这似乎是一个潜在的坏用户体验。我知道如果我点击一个复选框，我希望它被选中。