这是因为el-select中的v-model绑定的是一个变量,而el-options中的v-for循环是在不同的作用域中,每个作用域都有一个独立的变量,导致在选中时无法同步更新到父组件的变量。

解决方法是在el-options中绑定一个value属性,并将其绑定到父组件的变量上,在选中时更新父组件的变量。示例代码如下:

<el-select v-model="selected">
  <el-option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</el-option>
</el-select>
export default {
  data() {
    return {
      selected: '', // 父组件的变量
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    }
  },
  methods: {
    handleChange(value) {
      this.selected = value // 更新父组件的变量
    }
  },
  mounted() {
    this.selected = this.options[0].value // 初始化选中第一个选项
  }
}

在el-options中绑定value属性,并在选中时调用handleChange方法更新父组件的变量,这样就可以正确地选中对应的选项了。

el-select 中的el-options用v-for循环后选中的永远是最后一个

原文地址: https://www.cveoy.top/t/topic/bqbN 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录