display selected-value and then select other value seems not working

[mtzrmzia]

Describe the bug When I put the selected value through v-model and try to select another value from the list, the new selected value seems not to change

To Reproduce i get the data from an api so when the component is mounted the array is filled and i have something like this: states=[{id: 1, name: "Ciudad de México"}, {id: 2, name: "Aguascalientes"}, {id: 3, name: "Baja California"},…]

<v-select 
   :options="states"
   id="state"
   name="state"
   label="name"
   v-model="provider.state">
</v-select>

then if I need to edit the record I only just loaded the vue-select again, but this time the provider.state has some value like Aguascalientes and the value is displayed on the vue-select but when i want to select another item the selected-value does not change.

Expected behavior If the v-model value has a selected-value and then select another item from the select, the selected-value must to change

Screenshots

Additional context before the update this approach was working but after update to the the last version 3.9.1 it does not work.. so how can i show the selected value trough v-model?

[sagalbot]

My guess is there’s a problem in your application code - I can’t recreate the issue. Is the @input event firing?

[mtzrmzia]

Yes i'm trigger an function that get another data I have other vue-select that are filled when a previous vue-select item is selected

<v-select @input="getCities" :value="provider.state"
            placeholder="Selecciona un estado"
            :clearable="false" id="state"
            name="providerState" label="name" :options="states" class="mt-1">
    <template slot="no-options">
        Sin resultados.
    </template>
</v-select>

<v-select @input="getColonies" v-model="provider.zip_code"
          placeholder="Selecciona Código Postal"
          :clearable="false" id="zip_code"
          name="zip_code" label="name" :options="zipCodes" class="mt-1">
    <template slot="no-options">
        Sin resultados.
    </template>
</v-select>

<v-select @input="getZipCodes" v-model="provider.city"
          placeholder="Selecciona un municipio"
          :clearable="false" id="city"
          name="providerCity" label="name" :options="cities" class="mt-1">
    <template slot="no-options">
        Sin resultados.
    </template>
</v-select>

<v-select v-model="provider.colony"
          placeholder="Selecciona una colonia"
          :clearable="false" id="colony"
          name="providerCity" label="name" :options="colonies" class="mt-1">
    <template slot="no-options">
        Sin resultados.
    </template>
</v-select>

here the methods that fire when every item is selected

methods: {
    async getStates() {
        try {
            const response = await this.get_States();
            this.states = response.data;
        } catch (ex) {
            this.alert = {
                type: 'error',
                title: 'Error',
                body: 'Error el obtener los estados'
            };
        }
    },
    async getCities(newValue) {
        try {
            const response = await this.get_Cities(newValue.name);
            this.cities = response.data.response.municipios;
        } catch (ex) {
            this.alert = {
                type: 'error',
                title: 'Error',
                body: 'Error el obtener los municipios'
            };
        }
    },
    async getZipCodes(newValue) {
        try {
            const response = await this.get_ZipCodes(newValue)
            this.zipCodes = response.data.response.cp;
        } catch (ex) {
            this.alert = {
                type: 'error',
                title: 'Error',
                body: 'Error el obtener los codigos postales'
            };
        }
    },
    async getColonies(newValue) {
        try {
            const response = await this.get_Colonies(newValue);
            this.colonies = response.data.response.colonia;
        } catch (ex) {
            this.alert = {
                type: 'error',
                title: 'Error',
                body: 'Error el obtener las colonias'
            };
        }
    },
}

[sagalbot]

Can you post a reproduction link boiled down to the simplest possible version of the problem?

[mtzrmzia]

i tried to replicate the same behavior and logic that i'm using in my app but i dont know why in the example it work: https://codepen.io/isidromar95/pen/MWwqape

[mtzrmzia]

i guess i found the issue: the providerobject is a prop so i was binding the prop with v-model, so what i did was something like:

export default {
    data() {
        return {
            provider: {},
        }
    },
    props: {
        oldProvider: {
            type: Object,
            required: true
        }
    },
    mounted() {
        this.provider = this.oldProvider;
    }
}

and now it works, so mi guess is we can not bind a prop or we can?

[mtzrmzia]

i guess i found the issue:

the providerobject is a prop so i was binding the prop with v-model, so what i did was something like:

export default {

    data() {

        return {

            provider: {},

        }

    },

    props: {

        oldProvider: {

            type: Object,

            required: true

        }

    },

    mounted() {

        this.provider = this.oldProvider;

    }

}

and now it works, so mi guess is we can not bind a prop or we can?

I learned something new today.. props can not mutating