'How to set object values to autocomplete text-value in vuetify [closed]

enter image description here

[ { "id": 1, "start_time": "10:00", "end_time": "11:30", "active": true }emphasized text ]

vue.jsvuetify.js


Solution 1:[1]

Here is the working demo. 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return {
    selectedItems: [],
      items: [ { "id": 1, "start_time": "10:00", "end_time": "11:30", "active": true },{ "id": 2, "start_time": "11:30", "end_time": "01:00", "active": true }]
    }
  },
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-autocomplete
              v-model="selectedItems"
              :items="items"
              filled
              chips
              color="blue-grey lighten-2"
              label="Select"
              item-text="start_time"
              item-value="id"
              multiple
            >
              <template v-slot:selection="data">
                <v-chip
                  v-bind="data.attrs"
                  :input-value="data.selected"
                >
                  {{ data.item.start_time }} ~ {{data.item.end_time}}
                </v-chip>
              </template>
              <template v-slot:item="data">
                  <v-list-item-content>
                    <v-list-item-title>{{ data.item.start_time }} ~ {{data.item.end_time}}</v-list-item-title>
                  </v-list-item-content>
              </template>
            </v-autocomplete>
  </v-app>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nabil Ahmad

Related Questions