源头

最近在使用vue开发H5的项目前端的时候，遇见了动态增加下拉框选项，vue无法回显的问题。

现象

<template>
    <div style="border:1px solid pink;padding:30px 300px 30px 30%;">
      <span>{{ selectData.tip }}</span>
      <el-select v-model="selectData.value" clearable placeholder="请选择">
        <el-option
            v-for="item in selectData.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button type="success" @click="addOptionContent">增加下拉框选项</el-button>
    </div>
</template>
    
<script>
  export default {
    components: {
      
    },
    name: "test",
    data() {
      return {
        selectData: {
          tip: "下拉框选项：",
          value: "",
          options: [
            { value: '0', label: '双皮奶' }, 
            { value: '1', label: '蚵仔煎' }, 
            { value: '2', label: '龙须面' }, 
            { value: '3', label: '北京烤鸭' }
          ]
        }
      };
    },
    watch: {},
    mounted() {},
    beforeCreate() {},
    created() {},
    methods: {
      addOptionContent() {
        this.selectData.options[4] = { value: '4', label: '潮汕火锅' };
        console.log(this.selectData.options);
      }
    },
  };
</script>
<style scoped></style>

效果：

使用this.$set解决问题

addOptionContent() {
    this.$set(this.selectData.options, 4, { value: '4', label: '潮汕火锅' })
    console.log(this.selectData.options);
}

效果：

Vue中=赋值为啥不生效

官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性

结论

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。如果动态添加新的响应式属性使用this.$set