Vue&Vuetify：如何将绑定同一函数的复选框独立分开使用

嘿，想要用对应复选框分别独立控制名字和姓氏字段的必填状态，其实用Vue的v-model双向绑定就能轻松搞定，完全不需要原来那种统一切换的handleChanges方法，代码会更简洁直观～

实现思路 #

核心就是让每个复选框直接和对应的状态变量做双向绑定，再把这个变量绑定到输入框的required属性上——Vue会自动帮我们同步状态变化，不用手动写切换逻辑。

完整代码示例 #

<div id="app">
  <!-- 名字字段控制区 -->
  <label>
    <input type="checkbox" v-model="Frequired">
    名字设为必填
  </label>
  <input type="text" placeholder="请输入名字" :required="Frequired">

  <!-- 姓氏字段控制区 -->
  <label>
    <input type="checkbox" v-model="Lrequired">
    姓氏设为必填
  </label>
  <input type="text" placeholder="请输入姓氏" :required="Lrequired">
</div>

<script>
new Vue({
  el: '#app',
  data: () => ({
    Frequired: true, // 初始状态：名字必填
    Lrequired: false // 初始状态：姓氏非必填
  })
  // 不需要额外的handleChanges方法啦！
})
</script>

为什么这样更简洁？ #

• 每个复选框通过v-model直接绑定对应状态变量，勾选/取消时会自动更新Frequired和Lrequired的值，省掉了手动写状态切换的逻辑。
• 输入框的:required="XXX"会实时响应状态变量的变化，自动开启/关闭必填校验，逻辑清晰且代码量更少。

内容的提问来源于stack exchange，提问作者W.H