如何解决Vue Element UI 选择选项错误
元素界面
我已经从后端获取数据并将其用作不带有值对象的选择选项,但是 当我尝试在选择选项中选择任何项目时,选择选项显示所有选择的项目列表,但模型值是正确的
<el-option
v-for="item in options"
:key="item.key"
:label="item.label"
:value="item">
</el-option>
这是我创建的示例错误... https://codepen.io/JackarooNg/pen/qBRdqgO
解决方法
问题在于 model
名称与 select option
的 key
和 label
属性匹配
第 1 步:Script
会像
<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",value: "",value1: ""
};
}
});
第 2 步:HTML
模板将
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。