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

Question

我这辈子都弄不明白。

Fiddle 在：https://jsfiddle.net/s8xvkt10/

我要

1. 用户点击复选框
2. 然后根据不同的条件
3. 复选框calculatedCheckedValue returns 属性 /v-model of true/false
4. 并且选中状态反映了计算的CheckedValue

我可以得到：

1. calculatedCheckedValue 正确计算和插值

但我失败了：

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

我试过：

1. 使用带有自定义 set 的 v-model 进行计算并设置自定义 get returns
的本地状态
2. 使用 @change.prevent.stop="updateCalculatedValue" 和 :checked="calculatedValue"
模拟 v 模型
3. 假设@change 发生在@click 之后（我认为这是错误的）并使用 @click.prevent.stop="updateCalculatedValue" 和 :checked="calculatedValue"

模型正在工作并将计算值呈现为 DOM 范围内的字符串， 但是选中的值似乎不符合模型值

有人可以帮我吗？

Answer 1

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

据我所知，即使是键盘事件也会触发点击事件()

并且发生在@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();
            }
        }
}

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