Vue2+Vuetify中如何获取调用函数的组件的v-model值？

可以实现这个需求，下面是两种实用的方案：

方案一：给方法传递字段名参数（推荐） #

直接在模板中给updateForm方法传入当前字段的名称，就能在方法里精准定位到要更新的变量：

<template>
  <v-app>
    <!-- 给每个输入框的@input传递当前字段名作为第二个参数 -->
    <v-text-field 
      v-model="foo1" 
      @input="(inputVal) => updateForm(inputVal, 'foo1')"
    ></v-text-field>
    <v-text-field 
      v-model="foo2" 
      @input="(inputVal) => updateForm(inputVal, 'foo2')"
    ></v-text-field>
  </v-app>
</template>

<script>
export default {
  data() {
    return { 
      foo1: 0, 
      foo2: 0 
    }
  },
  methods: {
    updateForm(inputVal, fieldName) {
      // 处理原有表单逻辑（添加this访问实例数据，同时避免除以0的错误）
      if (this.foo1 !== 0) {
        this.foo1 = this.foo1 / this.foo1 + this.foo2;
        this.foo2 = this.foo2 / this.foo1 + this.foo2;
      }

      // 对触发当前方法的字段进行特殊更新（比如除以2）
      this[fieldName] = inputVal / 2;
    }
  }
}
</script>

方案二：通过组件实例获取绑定信息（不推荐，耦合性高） #

如果不想传参数，也可以通过事件对象获取组件实例，再读取其v-model绑定的属性，但这种方式依赖Vue内部私有属性，耦合性较强：

<template>
  <v-app>
    <v-text-field 
      v-model="foo1" 
      @input="updateForm"
    ></v-text-field>
    <v-text-field 
      v-model="foo2" 
      @input="updateForm"
    ></v-text-field>
  </v-app>
</template>

<script>
export default {
  data() {
    return { 
      foo1: 0, 
      foo2: 0 
    }
  },
  methods: {
    updateForm(inputVal, event) {
      // 获取触发事件的组件实例
      const fieldComponent = event.target.__vue__;
      // 获取组件v-model绑定的字段名
      const fieldName = fieldComponent._bindingMetadata.model[0];

      // 原有逻辑处理
      if (this.foo1 !== 0) {
        this.foo1 = this.foo1 / this.foo1 + this.foo2;
        this.foo2 = this.foo2 / this.foo1 + this.foo2;
      }

      // 特殊更新触发字段
      this[fieldName] = inputVal / 2;
    }
  }
}
</script>

注意：方案二依赖Vue内部的私有属性（__vue__、_bindingMetadata），这些属性可能在版本更新中变动，稳定性远不如方案一，优先推荐使用方案一。

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