如何获取调用 Vuetify 函数的组件的 v-model？答案

【问题标题】：How to get the v-model of component that called the function in Vuetify?如何获取调用 Vuetify 函数的组件的 v-model？
【发布时间】：2023-02-05 12:54:37
【问题描述】：

我碰巧做了每个文本字段必须相互合作的形式，例如：

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

<script>
export default {
 data() {
  return {foo1:0, foo2:0}
 },

 methods:{
  updateForm(foo){
   foo1=foo1/foo1+foo2
   foo2=foo2/foo1+foo2

   //Can we get the v-model of foo which called the function to make a special update?? like 
   // foo=foo/2
 } 

 }
}
</script>

我正在使用 Vue2

【问题讨论】：

像在模板代码中调用普通 JS 函数一样传递它们，例如@input="updateForm(foo1)" 和 @input="updateForm(foo2)" 用于每个 v-text-fields。
@yoduh 不工作接收到的变量只包含 foo 的值而不是实际的 foo v 模型。所以当函数 gose foo="something" 它不更新 foo1 或 foo2
不可能通过对方法的引用来传递 v-model 变量，您能做的最好的事情就是发送某种标识符，您的方法可以使用该标识符来确定哪个变量已更新。我已经发布了这样一个解决方案的答案

标签： node.js vue.js vuetify.js

【解决方案1】：

使用数组保存输入的所有值并将数组索引传递给事件处理程序方法是解决问题的最常用方法。使用数组，您还可以利用 v-for 动态呈现您的输入元素，从而减少重复代码。

<template>
  <v-app>
    <v-text-field 
      v-for="(foo, i) in foos" :key="i" 
      type="number"
      v-model.number="foos[i]"
      @input="updateForm(i)"
    />
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      foos: [0, 0]
    };
  },

  methods: {
    updateForm(fooIndex) {
      this.foos[fooIndex] += 1;
    }
  }
};
</script>

【讨论】：