代码之家 › 专栏 › 技术社区 › Dmitry Bubnenkov

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

vue.js

0

Dmitry Bubnenkov · 技术社区 · 7 年前

我要做的很简单 drop-down list (又名select)使用Vue元素。我需要将选定的值id放入变量中,但我不知道如何使用元素。我知道如何在纯Vue中实现它,但它不能与元素一起工作。

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

例子有点小问题。它现在可以工作了,因为我从来没有在jsfiddle中使用过Vue元素。

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

1 回复 | 直到 7 年前

1

dziraf 7 年前

我已经修改了你的小提琴使它工作: https://jsfiddle.net/dxh2mbkv/33/

 <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 并补充道 :label="item.name" 正确显示选项标签。自从你 selectedPerson 绑定到一个数字,我把它的默认值改为 null .