v-text-field 的值 returns 当文本区域有值时为 null

Question

我正在尝试从 vuetify 的 v-text-field 中获取 value。我遇到的问题是，我认为通过输入内容，该字段会自动将输入的内容分配给 vue-text-field 的 value。然而，情况似乎并非如此。下面是直接来自 vuetify 的代码，还有一些额外的代码试图提取 value:

<template>
  <v-card
    class="overflow-hidden"
    color="purple lighten-1"
    dark
  >
    <v-toolbar
      flat
      color="purple"
    >
      <v-icon>mdi-account</v-icon>
      <v-toolbar-title class="font-weight-light">
        {{setterTitle}}
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
        color="purple darken-3"
        fab
        small
        @click="isEditing = !isEditing"
      >
        <v-icon v-if="isEditing">
          mdi-close
        </v-icon>
        <v-icon v-else>
          mdi-pencil
        </v-icon>
      </v-btn>
    </v-toolbar>
    <v-card-text>
      <v-text-field ref="rowCount"
        :disabled="!isEditing"
        :value="2"
        autofocus
        color="white"
        label="Number of Rows"
      ></v-text-field>
      <v-autocomplete
        :disabled="!isEditing"
        :items="states"
        :filter="customFilter"
        color="white"
        item-text="name"
        label="Number of Columns"
      ></v-autocomplete>
    </v-card-text>
    <v-divider></v-divider>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn
        :disabled="!isEditing"
        color="success"
        @click="save"
      >
        Save
      </v-btn>
    </v-card-actions>
    <v-snackbar
      v-model="hasSaved"
      :timeout="2000"
      absolute
      bottom
      left
    >
      Your profile has been updated
    </v-snackbar>
  </v-card>
</template>

<script>
  export default {
    props: {
      setterTitle: String
    },
    data () {
      return {
        hasSaved: false,
        isEditing: null,
        model: null,
        states: [
          { name: 'Single', abbr: 'S', id: 1 },
          { name: 'Double', abbr: 'D', id: 2 },
          { name: 'Triple', abbr: 'T', id: 3 },
          { name: 'Custom', abbr: 'C', id: 0 },
          // { name: 'New York', abbr: 'NY', id: 5 },
        ],
      }
    },

    methods: {
      customFilter (item, queryText, itemText) {
        const textOne = item.name.toLowerCase()
        const textTwo = item.abbr.toLowerCase()
        const searchText = queryText.toLowerCase()
        console.log(textOne, textTwo,itemText)
        return textOne.indexOf(searchText) > -1 ||
          textTwo.indexOf(searchText) > -1
      },
      save () {
        this.isEditing = !this.isEditing
        this.hasSaved = true
        console.log(this.$refs.rowCount.value)
      },
    },
  }
</script>

如您所见，我在 v-text-field 标签中添加了一个 ref。然后我尝试使用该引用从 save() 方法中提取值。如果我还分配了 :value="2"，this.$refs.rowCount.value 总是 return 2。但是，如果我没有将值属性设置为 2，则 this.$refs.rowCount.value returns 为 null，即使我在 v-text-field 中输入了一些内容。我猜我在这里误解了一些东西。也许当我在字段中键入时，它不会自动将键入的内容分配给值？谢谢你的帮助。

我已经为 v-text-field https://vuetifyjs.com/en/api/v-text-field/#component-pages

附加了 api

Answer 1

v-text-field 被设计为 Vue 中的通用自定义输入控件 - 它有一个 value 属性和一个 input 事件，这意味着它可以与 v-model 一起使用 -查看文档 how that works

作为用户，您可以这样做：

<template>
  <v-text-field v-model="text" />
</template>
<script>
export default {
  data: function() {
    return {
      text: '' // initial value
    }
  }
}
</script>

关于你的问题 - value 是一个道具。 Vue 中的所有道具都是 one way only - 父组件可以向组件发送数据（并在将来更改该数据）但子组件不能更改它接收到的道具的值。这就是为什么当您在文本框中键入内容时，v-text-field 必须使用 input 事件来告诉父组件某些内容已更改并且该父组件应更新 value prop 的“它自己的来源” ...

v-model 是 Vue 的“语法糖” 如何更轻松地使用这两个...

v-text-field 的值 returns 当文本区域有值时为 null

Value of v-text-field returns null when text area has a value

vue.js

vuetify.js