Select v-模型对象 select
Select v-model Object select
我们如何 select 在 v-model 中一起使用项目道具
我的意思是我 select 某些东西只取一个值。
我想 select 值它应该绑定 name 和 dept 在一起
因为我会将这些值推送到 table。
<select v-model="name">
<option v-for="member in members" :key="member.id" :label="member.name" :value="member.name">
</option>
</select>
data(){
return {
members: [{id: 1, name: 'alpkaan', dept: 'quality'}]
}
}
在您的 select 中,您必须有一个包含 selected 值的变量,
将监听每个值更改的事件以及与此事件相关的方法,您将能够浏览对象数组以找到具有 selected 值的对象。
注意:我用 delete this.memberSelectedData.id
删除了 id,但如果需要,您可以保留它,这是屏幕截图。
还有代码:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<select v-model="memberSelected" @change="slectMember()">
<option v-for="member in members" :key="member.id" :label="member.name" :value="member.name"></option>
</select>
<p>Member name : {{memberSelected}}</p>
<p>Member data : {{memberSelectedData}}</p>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
members: [{ id: 1, name: "alpkaan", dept: "quality" }, { id: 2, name: "alpkaan2", dept: "quality2" }],
memberSelected: "",
memberSelectedData: {}
};
},
methods: {
slectMember() {
this.members.map( member => {
if(member.name === this.memberSelected){
this.memberSelectedData = member
delete this.memberSelectedData.id
}
})
}
}
};
</script>
我找到了一种方法 运行
:value="{'id':member.id, 'name':member.name}"
但是;
Select 按钮无法正常工作。因为 v-model="name"
这种情况我怎么解决的。 :(
我们如何 select 在 v-model 中一起使用项目道具 我的意思是我 select 某些东西只取一个值。 我想 select 值它应该绑定 name 和 dept 在一起 因为我会将这些值推送到 table。
<select v-model="name">
<option v-for="member in members" :key="member.id" :label="member.name" :value="member.name">
</option>
</select>
data(){
return {
members: [{id: 1, name: 'alpkaan', dept: 'quality'}]
}
}
在您的 select 中,您必须有一个包含 selected 值的变量, 将监听每个值更改的事件以及与此事件相关的方法,您将能够浏览对象数组以找到具有 selected 值的对象。
注意:我用 delete this.memberSelectedData.id
删除了 id,但如果需要,您可以保留它,这是屏幕截图。
还有代码:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<select v-model="memberSelected" @change="slectMember()">
<option v-for="member in members" :key="member.id" :label="member.name" :value="member.name"></option>
</select>
<p>Member name : {{memberSelected}}</p>
<p>Member data : {{memberSelectedData}}</p>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
members: [{ id: 1, name: "alpkaan", dept: "quality" }, { id: 2, name: "alpkaan2", dept: "quality2" }],
memberSelected: "",
memberSelectedData: {}
};
},
methods: {
slectMember() {
this.members.map( member => {
if(member.name === this.memberSelected){
this.memberSelectedData = member
delete this.memberSelectedData.id
}
})
}
}
};
</script>
我找到了一种方法 运行 :value="{'id':member.id, 'name':member.name}"
但是; Select 按钮无法正常工作。因为 v-model="name"
这种情况我怎么解决的。 :(