CODEWITHSUNDEEP
vue.jsvuejs2vuetify.jsnuxt.js
Mojtaba Barari
Mojtaba Barari

Reputation: 1294

How to set the value of Vuetify select to array or object

here is my codes:

<template>
    <v-col cols="12" sm="6" md="3" class="px-1 text_details_color3">
        <v-select
        :items="items"
        :label="lang.category"
        v-model="selected"
        @change="emitEvent"
        item-text="title"
        item-value="id"
        outlined></v-select>
        {{selected}}
    </v-col>
</template>

<script>
export default {
    props:['selectIndex','catid','pcat'],
    data(){
        return{
            selected:{},
            items:[]
        }
    },
    async fetch(){
        this.items = [
            {id: this.catid + 1, title: this.catid+'title1', subCategory: true},
            {id: this.catid + 2, title: this.catid+'title2', subCategory: true},
            {id: this.catid + 3, title: this.catid+'title3', subCategory: false},
            {id: this.catid + 4, title: this.catid+'title4', subCategory: true}
        ]
    },
    methods:{
        emitEvent(){
            this.$emit('input', this.selected)
            this.$emit('changed')
            //$nuxt.$emit('nextcat', )
        }
    },
    created(){
        
    },
    mounted(){
        this.selected = this.pcat
    }
}
</script>

right now it only send the id to selected, but i want to send both id and subCategory. if i remove the item-value , it will fill my selected by title, if i remove both item-value & item-text, it wont show title in my select. what should i do? i should some how send subCategory to parent component to find out if it has sub cat or not.

Upvotes: 0

Views: 757

Answers (1)

Igor Moraru
Igor Moraru

Reputation: 7739

You should make use of 'return-object' property. If it is set to true, it will return the entire item object when selected.

<v-select
  // other properties
  return-object
  item-text="title"
  item-value="id"
  >
</v-select>

Upvotes: 1

Related Questions