0

Im trying to update the v-autocomplete value set in custom component via the v-model directive , but that is not working as expected , unless there is some user interaction .

<template>
  <v-autocomplete
    :items="accounts"
    v-model="account_id"
    item-text="name"
    item-value="id"
    clearable
    :outlined="outlined"
    :dense="dense"
    :label="label"
    :rounded="rounded"
    cache-items
  >
  </v-autocomplete>
</template>
<script>
export default {
    name:"account-select",
    props:['top','rounded','dense','outlined','label','value'],
    data(){
        return{
            accounts:[],
            types:[],
            account_id:null,
        };
    },
    mounted(){
        this.getAccounts();
        this.top = this.$props.top;
        this.rounded = this.$props.rounded;
        this.dense = this.$props.dense;
        this.outlined = this.$props.outlined;
        this.label = this.$props.label;
        this.rounded = this.$props.rounded;
        this.account_id = this.$props.value;
    },
    methods:{
      getAccounts(){
      //some code is here to get this.accounts value from api
      }
    },
    watch:{
        account_id:function(val){
            this.$emit("input",val);
        },
    }
}
</script>

in parent component , when I try to mount this component I do it like this

  <account-select v-model="item.account_id" top="2" />

this works fine as there exists user interaction to the component .

but when I try to make it dynamically like this

this.item.account_id=1;

nothing happens to the component and it doesnt update to show up the selected item .

so how can I solve this problem ?

Ahmed Rafie
  • 67
  • 2
  • 9
  • What is your Vue version? – kasvith Dec 12 '20 at 21:17
  • I think its not the problem but Im using version 2.5.17 – Ahmed Rafie Dec 13 '20 at 08:03
  • 2
    the thing with `v-autocomplete` is that for it to show you the item that's in its `v-model` that item has to also exist in its `items` array , and that array is usually empty when you're trying to put some data programmatically, so for that to work you can check the array and if it doesn't include your item, simply push the value of `v-model` in it and it will work. – M3HDI Dec 13 '20 at 08:03

0 Answers0