解决Vue中el-select下拉框点击option，select未更新的问题

问题描述

在使用Vue开发的过程中，我们经常会使用到element-ui，其中el-select是一个非常常用的组件。然而，有时当我们在下拉框中选择一个选项时，我们会发现select的显示值并没有更新。

问题原因

这个问题的原因是因为el-select的选项(option)是通过slot的方式进行内容插入的，而slot在Vue的渲染机制中是惰性渲染的，也就是说，只有在需要渲染对应内容的时候才会进行渲染，否则会一直保持默认值。

解决方法

为了解决这个问题，我们需要手动强制Vue对el-select进行重新渲染。这可以通过以下几种方法来实现。

方法一：使用v-if

我们可以给el-select上添加一个v-if属性，并且将其绑定到一个变量上。当我们选中了一个选项之后，通过改变这个变量的值来强制el-select重新进行渲染。

<template>
  <el-select v-model="selected" v-if="showSelect">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
      ],
      selected: '',
      showSelect: true
    }
  },
  methods: {
    handleSelect() {
      // 选中了一个选项后，改变showSelect的值来触发重新渲染
      this.showSelect = false;

      this.$nextTick(() => {
        this.showSelect = true;
      });
    }
  }
}

方法二：使用key

我们可以为el-select添加一个key属性，并且将其绑定到一个变量上。当我们选中了一个选项之后，通过改变这个变量的值来强制el-select重新进行渲染。

<template>
  <el-select v-model="selected" :key="selectKey">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
      ],
      selected: '',
      selectKey: 0
    }
  },
  methods: {
    handleSelect() {
      // 选中了一个选项后，通过改变selectKey的值来触发重新渲染
      this.selectKey += 1;
    }
  }
}

方法三：使用ref

我们可以通过ref来获取到el-select的实例，并调用其方法进行重新渲染。

<template>
  <el-select v-model="selected" ref="selectRef">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
      ],
      selected: ''
    }
  },
  methods: {
    handleSelect() {
      // 在选中了一个选项后，通过调用selectRef的clear方法清空已选中的值，并重新调用select方法进行渲染
      this.$refs.selectRef.clear();
      this.$refs.selectRef.select();
    }
  }
}

总结

以上就是解决Vue中el-select下拉框点击option，select未更新的问题的几种方法。根据实际场景选择适合自己的方法进行解决。希望本文能帮助到大家！

本文来自极简博客，作者：风华绝代，转载请注明原文链接：解决Vue中el-select下拉框点击option，select未更新的问题