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

Question

I'm trying to get the value from vuetify's v-text-field. The problem I am having is that I thought by typing something in, the field will automatically assign whatever is typed to vue-text-field's value. However this doesn't seem to be the case. Below is the code directly from vuetify with some additional code attempting to extract the 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>

As you can see, in the v-text-field tag I added a ref. I then tried to use that reference to extract the value from the save() method. Provided that I also have :value="2" assigned, this.$refs.rowCount.value always return 2. However if I don't have the value property set as 2 then this.$refs.rowCount.value returns null even though I've typed something in the v-text-field. I'm guessing I am misunderstanding something here. Maybe when I type to the field, it doesn't automatically assign what is typed to the value? Thank you for your help.

I've attached the api for v-text-field https://vuetifyjs.com/en/api/v-text-field/#component-pages

Answer 1

v-text-field is designed as common custom input control in Vue - it has a value prop and a input event which means it can by used with v-model - see the docs how that works

As a user, you do this:

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

To your question - value is a prop. All props in Vue are one way only - parent can send data to the component (and change that data in the future) but child component cannot change value of the prop it receives. That's why when you type something into the textbox the v-text-field must use an input event to tell the parent component that something has changed and that parent should update "it's own source" of value prop...

v-model is Vue's "syntactic sugar" how to work with these two more easily...