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

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