如何获取文本字段的值并将其传递给 Vue.js 中的方法？

Question

我是 Vue 和 Vuetify 的新手，但这是我在阅读和尝试之后得到的：

我有以下模板：

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

我在数据中有如下“MyText”：

data() {
  return {
    myText: ''
  }

现在我想检查用户输入的文本字段中的值，但是尽管我将它添加到 v-model 中，但我总是得到它作为空字符串。

这里是我调用它的地方：

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

那么如何读取用户输入的值呢？并确保它是输入的最新值。

Answer 1

不确定是什么问题，但这完全有效

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

如何获取文本字段的值并将其传递给 Vue.js 中的方法？

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

textfield

vue.js

vuetify.js