vue.js - 所有的 vuetify 选择看起来都像是被选中的

Question

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

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

您可以在 items 数组中指定与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}
  })