Vue.js Select下拉框为空无显示，移除v-model="newItem.category"后恢复正常求助

嘿，我来帮你捋清楚这个问题的根源～

你碰到的这个情况，核心原因是v-model的初始值和下拉选项的value不匹配，导致Vue找不到对应的选中项，所以下拉框一开始是空的。

具体原理： #

当你给<select>绑定v-model="newItem.category"时，Vue会遵循这样的逻辑：

1. 初始化阶段，它会尝试把newItem.category的值和所有<option>的value做匹配；
2. 如果newItem.category是undefined、null，或者是一个不在选项列表里的值，Vue就找不到对应的选项，这时候<select>就没有选中项，视觉上就是空的；
3. 而当你没有绑定v-model时，浏览器会触发默认行为——自动选中第一个<option>，所以下拉框看起来是正常的。

举个实际例子，假设你的下拉选项是这样的：

<select v-model="newItem.category">
  <option value="food">食物</option>
  <option value="electronics">电子产品</option>
</select>

如果你的newItem初始是{}（也就是newItem.category默认是undefined），这时候没有任何选项的value是undefined，所以下拉框就会空着。

解决办法： #

有两种简单的方式可以修复这个问题：

• 方式一：给v-model设置匹配的初始值
  在你的data里，给newItem.category设置一个存在于选项列表中的value，比如：

  data() {
    return {
      newItem: {
        category: 'food' // 和第一个选项的value对应
      }
    }
  }
  

  这样初始化时Vue就能找到对应的选项，下拉框就会正常显示选中项。

• 方式二：添加一个默认空选项
  在选项列表最前面加一个value为空的选项，比如：

  <select v-model="newItem.category">
    <option value="">请选择分类</option>
    <option value="food">食物</option>
    <option value="electronics">电子产品</option>
  </select>
  

  这样当newItem.category是undefined或者空字符串时，会自动选中这个默认选项，下拉框就不会空着了。

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