All vuetify selects look like they are selected

Question

Why are all select items blue in this example? It looks like they are already 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}
    })
}

I have prepared a codepen for this: 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/[email protected]/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/[email protected]/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>

You can specify the specific properties within your items array correspond to the text and value fields. By default, this is text and value.

If you want the type of obj to be an object, also can use the return-object prop which will return the entire object of the selected item on selection.

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

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