vue：类似反应的受控复选框？

Question

在 React 中，我们可以有一个像这样的受控复选框

<input type="checkbox" checked={true} />

这将使复选框始终处于选中状态，即使用户点击它

但在 Vue 中，在为 checked 绑定 true 值之后

<input type="checkbox" :checked="true" />

它最初被选中，但用户仍然可以点击更改它。

如何在 Vue 中防止这种行为？

---

更新：

我真正想要实现的是

• 可以单击复选框取消选中
• 但不能点击查看，唯一的方法是更改​​它旁边的<select />
• 取消选中复选框将清除<select />

我当前的实现：https://codesandbox.io/s/goofy-mcnulty-seh6w?file=/src/App.vue

• 使用 key 和 @click.prevent 有点不适合我。

Answer 1

我为您的问题提出了以下解决方案。 让我们一步一步来解释它是如何工作的。

我们将输入元素的选中属性设置为本地布尔值（checkboxChecked）。此外，我们希望在单击复选框后自动更改它，这就是为什么我们还将此 checkboxChecked 布尔值添加为 v-model 属性。

如果未选中复选框（checkboxChecked = false），我们通过将 input 元素的 disabled 属性设置为 true 来防止用户再次选中它。

在 select 元素上，我们监听 @change 事件（请参阅此 question 上的 change 事件）并运行 onSelectChange 方法。然后，此方法将 checkboxChecked 布尔值设置回 true，使用户能够再次取消选中该复选框。

此外，我们将ref 属性添加到第一个选项（如果复选框未选中，我们要选择的选项）。

最后，我们在 checkboxChecked 属性中添加了一个观察者（查看value watchers 上的文档）。如果现在单击复选框，如果 checkboxChecked 值为 false，我们的 watcher 函数中的 if 语句会使用 ref 属性选择第一个选项。

编辑

我忘了提到的是，您还必须检查用户是否真的选择了除空之外的其他选项（我通过将 event.target.value 与空字符串进行比较来完成此操作）。我现在已将其添加到代码中。

客户仍然可以继续使用他的 webbrowsers html 编辑器手动将 disabled 属性设置为 false。

<template>
  <div id="app">
    <input
      type="checkbox"
      :checked="checkboxChecked"
      :disabled="!checkboxChecked"
      v-model="checkboxChecked"
    />

    <select style="width: 5em" @change="onSelectChange($event)">
      <option ref="emptySelectOption" value="">empty</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      checkboxChecked: true,
    };
  },
  methods: {
    onSelectChange(event) {
        if (event.target.value !== "") this.checkboxChecked = true;
    },
  },
  watch: {
    checkboxChecked(value) {
      if (!value) this.$refs.emptySelectOption.selected = true;
    },
  },
};
</script>