Google chrome vue.js复选框在chrome中未正确更新

我是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>

加载时会选中第一个框#小框，但单击框时会同时切换true或false

---

谢谢你的帮助

由于浏览器行为不同，您可以像这样使用

$nextTick

绑定事件以防止不一致。似乎这比使用watcher更具可读性和可追踪性

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

名单

迷你

这是一个已知的行为：让它与手表一起工作，谢谢！

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