Question

我是Vue.js的新手。基本上，我有两个复选框，我希望它们的行为像单选按钮一样（我知道我可以使用单选按钮，但我想知道问题出在哪里），它在Safari中可以正常工作，但在Chrome中却不能。

这些是复选框：

<label class="list-display" for="list-box">
   <input type="checkbox" id="list-box" v-model="list"
    v-on:click='mini=!list'>
   <span class="switch">
     <p>list</p>
   </span>
</label>

<label class='list-display' for="mini-box">
   <input type="checkbox" id="mini-box" v-model="mini"
    v-on:click='list=!mini'>
   <span class="switch">
     <p>mini</p>
   </span>
</label>

在我声明的数据中

list: true,
mini: false,

加载时，它会检查第一个框＃mini-box，但是单击框时，两者都切换为true或false

谢谢您的帮助！

Answer 1

由于浏览器行为不同，您可以像这样使用$nextTick绑定事件，以防止不一致。似乎比使用观察程序更具可读性和可追溯性。

<label class="list-display" for="list-box">
   <input type="checkbox" id="list-box" :value="list" @click="$nextTick(()=>{mini = !(list=$event.target.checked)})">
   <span class="switch">
     <p>list</p>
   </span>
</label>

<label class='list-display' for="mini-box">
   <input type="checkbox" id="mini-box" :value="mini" @click="$nextTick(()=>{list = !(mini=$event.target.checked)})">
   <span class="switch">
     <p>mini</p>
   </span>
</label>

Vue.js复选框无法在Chrome中正确更新

1 个答案: