I am using vuejs 3.4.31 and vuetify ^3.6.14 I want to select an equipment object in a list of equipment objects

In my template

<v-select 
    v-model="brModel.equipment"   
    v-if="equipmentsReady"
    label="Équipement" 
    :items="equipments"
    :item-props="equipmentItemProps" 
    item-text="name" //works the same with equipmentItemProps
    @update:model-value="oneInputChanged"
>
</v-select>

In my script setup

const brModel = ref({
    id: null,
    name: null,
    equipment: null,
})

function equipmentItemProps(item) {
    return {
        title: item.name
    }
}

async function loadEquipments() {
    try {
        await axios.get('sanctum/csrf-cookie')
        const { data } = await axios.get('api/equipments')
        equipments.value = data.data
        equipmentsReady.value = true
    } catch (error) {
        console.log('something wrong happened')    
    }   
}

const equipments=ref()
loadEquipments()

//load the br
loadBr(brId.value)//comes from the request params
async function loadBr(id) {
    try {
        await axios.get('sanctum/csrf-cookie')
        const { data } = await axios.get('api/br/' + id)
        brModel.value = data.data[0]
    } catch (e) {
       console.log('Something wrong happened')
    }
}

How it works At page refresh a list of equipments is loaded into the equipments ref. The v-select is used has shown and I can select an equipment object which is loaded in brModel.equipment Selection works correctly and the v-select displays the selected equipment's name, but when I refresh the page, despite the fact the brModel.equipment is correctly loaded with the correct equipment object, the v-select no longer displays the name of the selected equipment. Nevertheless it is still working correctly and, if I renew the selection, the name of the selected equipment is displayed.

What I tried I duplicated the v-select in the template and a selection change in one produces a change in the other indicating that in this case the select follows the model.

My question Why the name of the selected equipment no longer appears after page refresh i.e. after the model is set from an other source?

I am using vuejs 3.4.31 and vuetify ^3.6.14 I want to select an equipment object in a list of equipment objects

In my template

<v-select 
    v-model="brModel.equipment"   
    v-if="equipmentsReady"
    label="Équipement" 
    :items="equipments"
    :item-props="equipmentItemProps" 
    item-text="name" //works the same with equipmentItemProps
    @update:model-value="oneInputChanged"
>
</v-select>

In my script setup

const brModel = ref({
    id: null,
    name: null,
    equipment: null,
})

function equipmentItemProps(item) {
    return {
        title: item.name
    }
}

async function loadEquipments() {
    try {
        await axios.get('sanctum/csrf-cookie')
        const { data } = await axios.get('api/equipments')
        equipments.value = data.data
        equipmentsReady.value = true
    } catch (error) {
        console.log('something wrong happened')    
    }   
}

const equipments=ref()
loadEquipments()

//load the br
loadBr(brId.value)//comes from the request params
async function loadBr(id) {
    try {
        await axios.get('sanctum/csrf-cookie')
        const { data } = await axios.get('api/br/' + id)
        brModel.value = data.data[0]
    } catch (e) {
       console.log('Something wrong happened')
    }
}

How it works At page refresh a list of equipments is loaded into the equipments ref. The v-select is used has shown and I can select an equipment object which is loaded in brModel.equipment Selection works correctly and the v-select displays the selected equipment's name, but when I refresh the page, despite the fact the brModel.equipment is correctly loaded with the correct equipment object, the v-select no longer displays the name of the selected equipment. Nevertheless it is still working correctly and, if I renew the selection, the name of the selected equipment is displayed.

What I tried I duplicated the v-select in the template and a selection change in one produces a change in the other indicating that in this case the select follows the model.

My question Why the name of the selected equipment no longer appears after page refresh i.e. after the model is set from an other source?

• vuetify.js
• v-select

1 Answer 1

I eventually found an explanation. My mistake was that the equipment was stored as JSON string and I didn't parse the value returned by the api. After

brModel.value = data.data[0]

I should add

brModel.value.equipment=JSON.parse(brModel.value.equipment)