Select v-模型对象 select

Question

我们如何 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'}]
  }
}

Answer 1

在您的 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>

Answer 2

我找到了一种方法运行 :value="{'id':member.id, 'name':member.name}"

但是； Select 按钮无法正常工作。因为 v-model="name"

这种情况我怎么解决的。 :(

Select v-模型对象 select

Select v-model Object select

javascript

vue.js