element ui select下拉框传递数据却没有选中

最新推荐文章于 2023-05-31 14:39:40 发布

wendyNo

最新推荐文章于 2023-05-31 14:39:40 发布

阅读量461

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wendyno/article/details/118420449

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

错误描述：

value传递了1，但是却并没有选中显示，而是显示的1。

在这里插入图片描述

<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>
  var Main = {
    data() {
      return {
        options: [{
          value: '1',
          label: '黄金糕'
        }, {
          value: '2',
          label: '双皮奶'
        }, {
          value: '3',
          label: '蚵仔煎'
        }, {
          value: '4',
          label: '龙须面'
        }, {
          value: '5',
          label: '北京烤鸭'
        }],
        value: 1
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>

解决

在element-ui中option的value数据类型和选中数据的数据类型必须一致，如果不一致，更改一下即可。

<script>
  var Main = {
    data() {
      return {
        options: [{
          value: '1',
          label: '黄金糕'
        }, {
          value: '2',
          label: '双皮奶'
        }, {
          value: '3',
          label: '蚵仔煎'
        }, {
          value: '4',
          label: '龙须面'
        }, {
          value: '5',
          label: '北京烤鸭'
        }],
        value: '1'
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>