Vue Element UI 选择选项错误

问题描述

元素界面

我已经从后端获取数据并将其用作不带有值对象的选择选项，但是 当我尝试在选择选项中选择任何项目时，选择选项显示所有选择的项目列表，但模型值是正确的

按照代码获取错误

    <el-option
      v-for="item in options"
      :key="item.key"
      :label="item.label"
      :value="item">
    </el-option>

这是我创建的示例错误... https://codepen.io/JackarooNg/pen/qBRdqgO

解决方法

问题在于 model 名称与 select option 的 key 和 label 属性匹配

第 1 步：Script 会像

<script>
new Vue({
  el: "#app",data: function () {
    return {
      visible: false,options: [
        {
          value: "Option1",label: "Option1"
        },{
          value: "Option2",label: "Option2"
        },{
          value: "Option3",label: "Option3"
        }
      ],options1: [
        {
          value: "Option1",value: "",value1: ""
    };
  }
});

第 2 步：HTML 模板将

<div id="app">
  <el-button @click="visible = true">Button</el-button>
  <el-dialog :visible.sync="visible" title="Hello world">
    <p>Try Element</p>
  </el-dialog>
  <el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item"
    >
    </el-option>
  </el-select>
  {{value}}
  <el-select v-model="value1" placeholder="Select">
    <el-option
      v-for="item in options1"
      :key="item.value"
      :label="item.label"
      :value="item"
    >
    </el-option>
  </el-select>
  {{value1}}
</div>

DEMO