选择v-model对象选择

Question

我们如何在v-model中一起选择项目道具我的意思是我选择的东西只取一个值。我想选择value，它应该是将name和dept绑定在一起，因为我将把这些值放到表中。

<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'}]
  }
}

Answer 1

在select中，您必须有一个将包含所选值的变量，一个将侦听每个值更改的事件，以及一个与此事件相关的方法，您将能够浏览对象数组以查找具有选定值的对象。

注意:我用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>

Answer 2

我发现它运行:value=的一种方式是“{‘id’：Member.id，'name':member.name}”

但是，选择按钮不能正常工作。因为v-model="name“

如何解决这种情况。:(