CODEWITHSUNDEEP
node.jsvue.jsvuetify.js
Natthapol Maneechote
Natthapol Maneechote

Reputation: 111

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

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

Upvotes: 0

Views: 134

Answers (1)

yoduh
yoduh

Reputation: 14649

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>

Upvotes: 1

Related Questions