Vue.js中v-model与selected无法同时生效问题求助

嘿，我完全明白你遇到的困扰——给select加上v-model绑定后，原本设置的selected属性就失效了，对吧？这其实是Vue的设计逻辑导致的，别担心，调整一下就能搞定！

问题根源 #

当你用v-model绑定select时，Vue会全权接管这个下拉框的选中状态，此时option上的selected属性会被Vue直接忽略，因为v-model的优先级更高。你的默认选项--all--的value是空字符串，所以根本不需要依赖selected属性，只要把v-model绑定的变量初始值设为空字符串，就能让这个默认选项自动选中。

修改后的代码 #

首先去除option上的selected属性，然后在组件的data里初始化selectFruit为空字符串：

<p class="topics">fruits</p>
<select class="select" v-model="selectFruit">
  <option value="">--all--</option>
  <option :key="index" :value="item" v-for="(item,index) in fruitList">{{item}}</option>
</select>

对应的data配置：

data() {
  return {
    selectFruit: '', // 初始化空字符串，对应默认选项的value
    fruitList: ['苹果', '香蕉', '橙子'] // 这里替换成你的实际数据
  }
}

拓展：实现数组过滤 #

这样设置后，v-model绑定的selectFruit就能正常用来过滤数组了，比如用计算属性快速实现：

computed: {
  filteredFruits() {
    // 当selectFruit为空时，返回全部水果；否则返回选中的水果
    return this.selectFruit 
      ? this.fruitList.filter(fruit => fruit === this.selectFruit) 
      : this.fruitList
  }
}

这样既保证了默认选项的正确选中，又能顺利实现你需要的数组过滤功能啦～

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