Vue.js中如何为下拉列表每一项遍历生成复选框实现多选功能

业务场景 #

现有州-城市联动下拉菜单，选中对应州后会动态加载该州下辖的所有城市作为下拉选项。需新增以下功能：

• 每个城市选项前添加复选框，支持同时选中多个城市
• 页面实时展示当前已选城市的总数量

现有参考代码 #

Vue 逻辑部分 #

data() {
    return {
      // 存储已选城市列表
      selected: [],
    }
},
watch: {
  // 监听已选列表变化，向外触发事件传递选中值
  selected(val) {
    this.$emit("checked", val);
  },
}

模板代码（原有错误写法示例） #

<div class="dropdown">
  <span>州:</span>
  <select :disabled="listCities.length == 0" v-model="selectedCity">
    <option value="">请选择城市</option>
    <option v-for="(city, index) in listCities" :key="index" :value="city.city_name">
      {{ city.city_name }}
      <!-- 该写法不生效：原生option不支持嵌套input元素 -->
      <input type="checkbox" :id="index" :value="city.city_name" v-model="selected" />
    </option>
  </select>
</div>

实现提示 #

原生<select>组件不支持多选复选框的交互，需要自己通过<div>、<ul>等标签结合CSS模拟下拉菜单的展开、收起效果，在自定义的下拉选项中嵌入复选框绑定selected数组即可实现需求，选中数量可直接通过selected.length获取实时展示。

内容的提问来源于stack exchange，提问作者T dhanunjay