Vue中更新列表后如何触发vue-template重新渲染实现下拉值实时更新？

基础代码实现 #

1. 响应式数据定义 #

在组件data中定义下拉选项数组和绑定的选中值，确保数据是响应式的：

data() {
  return {
    selectedValue: '',
    dropdownOptions: ['苹果', '香蕉', '橙子'] // 初始为水果列表
  }
}

2. 模板绑定 #

下拉菜单通过v-for遍历响应式数组渲染选项：

<!-- 下拉菜单 -->
<select v-model="selectedValue">
  <option v-for="(item, index) in dropdownOptions" :key="index" :value="item">{{ item }}</option>
</select>

<!-- 示例：绑定空格按键触发切换，可根据实际需求修改绑定的元素和按键事件 -->
<input type="text" @keyup.space="switchDropdownOptions" placeholder="按空格切换下拉选项">

3. 列表更新逻辑 #

Vue2无法检测到直接通过索引修改数组项、直接修改数组长度的操作，需使用以下三种官方推荐的响应式更新方式，即可触发模板自动重新渲染：

• 方式一：全量替换数组（最稳妥，适合整体切换列表的场景）

methods: {
  switchDropdownOptions() {
    // 直接将数组替换为花卉列表，整体赋值操作可被Vue检测到
    this.dropdownOptions = ['玫瑰', '百合', '康乃馨']
  }
}

• 方式二：使用$set修改指定索引的数组项（适合局部修改列表的场景）

// 示例：修改数组索引为0的项
this.$set(this.dropdownOptions, 0, '玫瑰')

• 方式三：调用Vue重写过的数组变异方法（支持局部新增、删除、替换操作）

// 示例：清空原有数组后插入花卉列表
this.dropdownOptions.splice(0, this.dropdownOptions.length, '玫瑰', '百合', '康乃馨')

注意事项 #

• 禁止直接通过索引赋值修改数组项，比如this.dropdownOptions[1] = '月季'，该操作无法触发Vue2的响应式更新
• 禁止直接修改数组的length属性，比如this.dropdownOptions.length = 0，该操作同样无法触发响应式更新

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