当文本区域有值时，v-text-field 的值返回 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 总是返回 2。但是，如果我没有将 value 属性设置为 2，那么即使我在 v-text-field 中输入了一些内容，this.$refs.rowCount.value 也会返回 null。我猜我在这里误解了一些东西。也许当我输入该字段时，它不会自动将输入的内容分配给该值？感谢您的帮助。

我已经附上了v-text-fieldhttps://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 中的所有 props 都是 one way only - 父组件可以向组件发送数据（并在将来更改该数据），但子组件不能更改它接收到的 prop 的值。这就是为什么当您在文本框中输入内容时，v-text-field 必须使用 input 事件来告诉父组件某些内容发生了变化，并且父组件应该更新 value 属性的“它自己的源”...

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