如何在 v-select 选项上设置属性？

Question

刚开始使用 Vue，需要一些关于最佳实践的建议。

我想要实现的目标：根据选择的选项，将 makeId 设置为等于 make 选项 ID。因此，例如，当我从下拉列表中选择“bmw”时，我希望 makeId 等于 2。

如果没有 Vuetify，我会在 v-for 循环期间为每个选项设置一个数据属性，然后 @change 只需获取该属性并将值分配给 makeid。

如何使用 Vuetify 实现我想要做的事情？

<v-select v-model="car.make" :items="makes" item-value="name" item-text="name"> </v-select>

data: function() {
  return {
    car: { make: "", makeId: "" },
    makes: [{ name: "audi", id: "1" }, { name: "bmw", id: "2" }]
  };
}

Answer 1

更新：

您可以将id 绑定为item-value，如果您需要单个值，则需要在v-model 上分配car.madeId 而不是car.make：

<v-select v-model="car.makeId" :items="makes" item-value="id" item-text="name"> </v-select>

或者您可以使用额外的方法进行对象绑定：

这是一个分支：codepen

Answer 2

这里的主要困难是您的对象有两种不同的格式。必须在 id/name 和 make/makeId 之间进行映射会使事情复杂化。

如果没有属性映射，这将很容易，您只需在v-select 上设置return-object。

假设这是不可能的，一种替代方法是将car 作为基于所选值的计算属性来执行属性重命名。这看起来像这样：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

  data () {
    return {
      selectedCar: null,
      makes: [{name: 'audi', id: '1'}, {name: 'bmw', id: '2'}]
    }
  },
  
  computed: {
    car () {
      const selectedCar = this.selectedCar
      
      if (selectedCar) {
        return {
          make: selectedCar.name,
          makeId: selectedCar.id
        }
      }
    }
  }
})

#app {
  padding: 10px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/mdi@2.2.43/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <p>{{ car }}</p>
    <v-select v-model="selectedCar" :items="makes" item-value="name" item-text="name" return-object> </v-select>
  </v-app>
</div>

我们可以翻转car 和selectedCar 之间的关系，这样car 在data 中，selectedCar 是计算属性。为此，我们需要实现一个 getter 和一个 setter：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

  data () {
    return {
      car: {make: '', makeId: ''},
      makes: [{name: 'audi', id: '1'}, {name: 'bmw', id: '2'}]
    }
  },
  
  computed: {
    selectedCar: {
      get () {
        return this.makes.find(make => make.id === this.car.makeId)
      },
      set (selectedCar) {
        this.car = {
          make: selectedCar.name,
          makeId: selectedCar.id
        }
      }
    }
  }
})

#app {
  padding: 10px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/mdi@2.2.43/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <p>{{ car }}</p>
    <v-select v-model="selectedCar" :items="makes" item-value="name" item-text="name" return-object> </v-select>
  </v-app>
</div>

第三种选择是完全放弃 v-model 并直接使用 :value/@input 对：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

  data () {
    return {
      car: {make: '', makeId: ''},
      makes: [{name: 'audi', id: '1'}, {name: 'bmw', id: '2'}]
    }
  },
  
  methods: {
    onInput (id) {
      const make = this.makes.find(make => make.id === id)
      
      this.car = {
        make: make.name,
        makeId: make.id
      }
    }
  }
})

#app {
  padding: 10px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/mdi@2.2.43/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.5/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <p>{{ car }}</p>
    <v-select :value="car.makeId" :items="makes" item-value="id" item-text="name" @input="onInput"> </v-select>
  </v-app>
</div>