Vue.js Vue元素UI选择选项错误 元素用户界面

我从后端获取数据，并将其用作选择选项，该选项不随value对象一起提供，但 当我尝试在“选择”选项中选择任何项目时，“选择”选项将显示所有选定项目列表，但模型值是正确的

按照代码获取错误

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

这是我创建的示例错误。。。

---

问题在于

型号

名称与

选择选项

的

键

和

标签的属性相匹配

第1步：

脚本

如下

<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",
          label: "Option1"
        },
        {
          value: "Option2",
          label: "Option2"
        },
        {
          value: "Option3",
          label: "Option3"
        }
      ],
      value: "",
      value1: ""
    };
  }
});

---

如果你想让你的v型模型值成为对象的值，那么使用：value=“item.value”否则一切看起来都很好谢谢，我明白你的意思了

<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>