选择v模型对象选择

Question

我们如何在v模型中一起选择道具 我的意思是我选择的东西只有一个价值。 我想选择一个值，它应该将名称和部门绑定在一起 因为我会将这些值推送到表上。

<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

在选择中，您必须具有一个将包含所选值的变量， 一个将监听每个值更改的事件，并使用与此事件相关的方法，您将能够浏览对象数组以找到具有所选值的对象。

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

如何解决这种情况idk。 ：（