日常开发记录-elementUI select 选择器没有设置多选属性，但是初始值多选了--原因：value值为null，或者值相同...

最新推荐文章于 2024-04-29 16:46:21 发布

原创最新推荐文章于 2024-04-29 16:46:21 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript #前端 #ecmascript

本文展示了在Vue.js中使用el-select组件时的一个常见错误实例，其中选项value属性未正确设置，导致选择器无法正常工作。通过分析代码，可以发现有多个选项的value值为null，这可能会引起选择器无法识别选中状态的问题。修复此问题的关键在于确保每个选项的value属性都有唯一且非空的值。

错误代码演示：

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: null,
        label: '黄金糕'
      }, {
        value: null,
        label: '双皮奶'
      }, {
        value: null,
        label: '蚵仔煎'
      }, {
        value: 3,
        label: '龙须面'
      }, {
        value: 4,
        label: '北京烤鸭'
      }],
      value: null
    }
  }
}
</script>

效果展示：