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

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

vue.js

Dmitry Bubnenkov · 技术社区 · 6 年前

我要做的很简单 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 回复 | 直到 6 年前

dziraf 6 年前

我已经修改了你的小提琴使它工作: 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 .

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前