Question

我需要对Vue Element做简单的drop-down list（又名select）。我需要将选定的值id放在变量中，但是我不明白如何使用Element进行操作。我知道如何在纯Vue中执行此操作，但是它不适用于Element。

    <el-select clearable placeholder="Select" class="SelectFullWidth" >
  <el-option
    v-for="item in people"
     :value="item.name" >
  </el-option>
 </el-select>

我需要在变量中获取选定的ID。

示例有个小问题。现在可以正常工作了，因为我从未将Vue Element与jsfiddle一起使用。

我需要在Vue元素https://jsfiddle.net/mani04/3x0z3vzk/中重新实现的纯Vue解决方案

Answer 1

我修改了您的小提琴以使其正常工作： https://jsfiddle.net/dxh2mbkv/33/（如果您在下拉菜单中看不到标签，这似乎是jsfiddle问题，当您在浏览器中打开开发人员工具或缩小屏幕宽度时，它们应该会出现）

 <el-select clearable placeholder="Select" class="SelectFullWidth" v-model="selectedPerson">
  <el-option
    v-for="item in people"
    :key="item.key"
    :label="item.name"
     :value="item.key" >
  </el-option>
 </el-select>
 Key: {{selectedPerson}}

我所做的是我将v-model="selectedPerson"添加到el-select，将:value中的el-option从item.name更改为item.key并添加了{{ 1}}，以正确显示选项标签。并且由于您的:label="item.name"绑定了一个数字，因此我将其默认值更改为selectedPerson。

Vue元素绑定在ID为ID的列表中选择

1 个答案: