所有 vuetify 选择看起来像是被选中答案

【问题标题】：All vuetify selects look like they are selected所有 vuetify 选择看起来像是被选中
【发布时间】：2020-08-25 07:38:27
【问题描述】：

为什么在这个例子中所有的选择项都是蓝色的？看起来他们已经被选中了。

<v-select
    v-model="obj"
    :items="arrOfObj"
>
    <template slot="selection" slot-scope="data">
        Obj: {{data.item.a}}
    </template>
    <template slot="item" slot-scope="data">
        Obj: {{data.item.a}}
    </template>
</v-select>

let arrOfObj = [{a: 1},{a: 2},{a: 3}]

export default {
    data: () => ({
        arrOfObj: arrOfObj,
        obj: {a: 2}
    })
}

我为此准备了一个 codepen：Codepen

【问题讨论】：

标签： vue.js select vuetify.js v-select

【解决方案1】：

new Vue({
  el: '#app',
  data: () => ({
    arrOfObj: [{
      a: 1
    }, {
      a: 2
    }, {
      a: 3
    }],
    obj: 2
  })
})

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-select v-model="obj" :items="arrOfObj" item-text="a" item-value="a">
          <template slot="selection" slot-scope="data">
                                Obj: {{data.item.a}}
                            </template>
          <template slot="item" slot-scope="data">
                                Obj: {{data.item.a}}
                            </template>
        </v-select>
      </v-container>
    </v-content>
  </v-app>
</div>

您可以在项目数组中指定与text 和value 字段对应的特定属性。默认情况下，这是text 和value。

如果您希望obj 的类型为对象，也可以使用return-object 属性，它将在选择时返回所选项目的整个对象。

<v-select v-model="obj" :items="arrOfObj" item-text="a" item-value="a" return-object>

data: () => ({
    obj: {a:2}
  })

【讨论】：