所有vuetify选择看起来都像已被选择

问题描述

在此示例中，为什么所有选择项都为蓝色？看来它们已被选中。

<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

解决方法

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}
  })