How to get value of text field and pass it to a method in Vue.js?

April 5, 2022

I am new to Vue and Vuetify, but that’s what I got so far after reading and trying:

I have the following template:

<template>
  <div>
    <div>
      <v-row>
        <v-text-field
          v-model="myText"
          label="enter a text (optional)"
        ></v-text-field>
      </v-row>
    </div>
    <v-btn color="#aaa" class="ml-4" outlined @click="getTest()">
      Check Value!
    </v-btn>
  </div>
</template>

and I have the "MyText" in the data as follow:

data() {
  return {
    myText: ''
  }

Now I want to check the value in the text field that the user has entered, but I am always getting it as empty string although I added it to the v-model.

here is where i am calling it:

methods: {
  getTest() {
    console.log(this.myText)
  }
}

So how can I read the value that users entered? and make sure it is the latest value that was entered.

>Solution :

Not sure what is the issue but this totally works

<template>
  <div>
    <div>
      <v-row>
        <v-text-field
          v-model="myText"
          label="enter a text (optional)"
        ></v-text-field>
      </v-row>
    </div>
    <v-btn color="#aaa" class="ml-4" outlined @click="getTest">
      Check Value!
    </v-btn>
    <p>value: {{ myText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myText: ''
    }
  },
  methods: {
    getTest() {
      console.log(this.myText)
    }
  }
}
</script>