Vuetify 2.2中如何通过$refs获取v-autocomplete选中值？

核心问题分析 #

你用$refs直接查询DOM获取值的方式不适合v-autocomplete——它的DOM结构和v-text-field不同，而且完全没必要绕这个弯路，Vue的数据驱动特性已经提供了更可靠的取值方式。

推荐解决方案 #

方法1：利用@change事件的参数直接取值

v-autocomplete的@change事件会自动把选中的值作为参数传递，直接用这个参数就行：

<!-- 模板里修改@change的调用方式 -->
<v-autocomplete
    ...
    @change="scanWarehouseOuter" <!-- 去掉括号，直接传方法 -->
/>

<script>
// 方法里直接接收参数
methods:{
  scanWarehouseOuter(selectedValue){
    console.log(selectedValue); // 直接拿到选中的值
  }
}
</script>

方法2：直接访问v-model绑定的computed属性

既然已经用v-model绑定了generatedLocation，在方法里直接调用这个computed属性就能拿到当前值，这是最符合Vue设计思想的方式：

methods:{
  scanWarehouseOuter(){
    console.log(this.generatedLocation);
  }
}

⚠️ 注意：你当前的generatedLocation的get/set方法是空的，这会导致v-model完全失效，必须补全逻辑。比如如果需要绑定内部状态：

data(){
  return {
    location_list:['1-12-7', '1-12-8'],
    _innerLocation: '' // 用这个变量存储实际值
  }
},
computed: {
  generatedLocation: {
    get() {
      return this._innerLocation;
    },
    set(value){
      this._innerLocation = value;
      // 这里可以添加你需要的额外处理逻辑
    }
  }
}

方法3（不推荐）：修正DOM选择器

如果非要用$refs，得适配v-autocomplete的DOM结构，把选择器改成：

scanWarehouseOuter(){
  let value = this.$refs.inputFromOutside.$el.querySelector('.v-field__input input').value;
  console.log(value);
}

⚠️ 这种方式依赖Vuetify的DOM结构，版本更新可能会失效，优先用前两种方法。

内容的提问来源于stack exchange，提问作者Sharif