VueJs 2 - 强制 Checkbox DOM 值尊重数据值答案

【问题标题】：VueJs 2 - Force Checkbox DOM value to respect data valueVueJs 2 - 强制 Checkbox DOM 值尊重数据值
【发布时间】：2019-10-03 17:01:44
【问题描述】：

我这辈子都想不通。

拨弄：https://jsfiddle.net/s8xvkt10/

我想要

用户点击复选框
然后根据不同的条件
复选框calculatedCheckedValue 返回数据属性/v-model 为真/假
并且选中状态反映了计算的CheckedValue

我可以得到：

calculatedCheckedValue 正确计算和插值

但我失败了：

让 :checked 属性在 DOM 中正确呈现 calculatedCheckedValue
例如如果单击 false 复选框并且 calculatedCheckedValue 仍返回 false，则该复选框会在屏幕上在选中和未选中之间切换

我试过了：

将v-model 与自定义set 一起使用，该自定义set 执行计算并设置自定义get 返回的本地状态
使用@change.prevent.stop="updateCalculatedValue" 和:checked="calculatedValue" 模仿v-model
假设@change 发生在@click 之后（我认为这是错误的）并使用@click.prevent.stop="updateCalculatedValue" 和:checked="calculatedValue"

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

有人可以帮帮我吗？

【问题讨论】：

"有人能帮帮我吗？" – 恐怕没有看到你的代码。
我害怕那个。我很快就会在codesandbox上放一些东西。谢谢
我建议创建一个minimal reproducible example。您可以使用this fiddle 作为起点。
感谢 Vince 的开始，我想我现在尝试了：jsfiddle.net/s8xvkt10
你的用例是什么，@Nathaniel Rink？似乎这个想法是有选择地覆盖用户对复选框所做的事情，这似乎是一个潜在的不良用户体验。我知道如果我点击一个复选框，我希望它会被选中。

标签： vue.js checkbox vuejs2 checked v-model

【解决方案1】：

我已经解决了这个问题：https://jsfiddle.net/pc7y2kwg/2/

据我所知，即使是键盘事件也会触发点击事件（src）

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

所以你可以click.prevent这个事件，但是你需要要么选择性地阻止它，要么在计算之后重新触发这个事件。

//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();
            }
        }
}

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

【讨论】：