Vue Element UI Select Option Bug

Question

Element UI

I have fetch the data from backend and use it as select option which does not come with value object, but when I try to select any item in select option, the select option show all item list selected, but the model value is correct

Follow Code Fetch the Bug

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

This was the Sample Bug I created... https://codepen.io/JackarooNg/pen/qBRdqgO

Answer 1

The problem is with model name is matched with select option's property of key and label

Step 1: Script will be like

<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: ""
    };
  }
});

Step 2: HTML template will be

<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