0

我试图通过 v-model 指令更新自定义组件中设置的 v-autocomplete 值，但这不能按预期工作，除非有一些用户交互。

<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>

在父组件中，当我尝试安装此组件时，我会这样做

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

这很好用，因为组件存在用户交互。

但是当我尝试像这样动态地使它

this.item.account_id=1;

组件没有任何反应，并且不会更新以显示所选项目。

那么我该如何解决这个问题呢？

4

0 回答 0