How to get the v-model of component that called the function in Vuetify?-CodePudding

I happen to do the form in which each text-field has to cooperate with each other for example:

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

Im using Vue2

CodePudding user response：

Using an array to hold all the values of your inputs and passing the array index to the event handler method is the most common way of solving your problem. With an array you can also utilize v-for to dynamically render your input elements, which cuts down on duplicate code.

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