所有 vuetify 选择看起来都像是被选中的

Question

为什么在此示例中所有 select 项都是蓝色的？看起来他们已经 selected.

<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

Answer 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 属性，它会 return 选中项目的整个对象。

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

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

所有 vuetify 选择看起来都像是被选中的

All vuetify selects look like they are selected

select

vue.js

vuetify.js

v-select