I am currently working on an input field that needs to be either blank or pre-populated based on certain conditions.
- Condition A: If the user is a new student, the field should be blank
- Condition B: If the user is an existing student, the field should be populated
The data for this input field is retrieved from either the data() function or a computed: property. Here is an example:
data () {
return {
studentName: '', // empty student name property (new student route)
studentPersonality: ''
}
},
computed: {
...mapGetters({
getStudent // existing student object (edit student route)
})
}
The input field should be blank if the user is arriving from the /new student route, or populated with existing student information if they're coming from the /edit route.
To populate the input field with the existing student's name, I can assign getStudent.name to v-model as shown below.
<input type="text" v-model="getStudent.name">
Alternatively, to clear the field, I can assign studentName to v-model
<input ... v-model="studentName">
Challenge: I am trying to use getStudent.name if it exists, and fallback to the blank studentName data() property if it does not. I have attempted:
<input ... v-model="getStudent.name || studentName">
This approach seemed to work initially, but it was deemed invalid and caused console errors
'v-model' directives require the attribute value which is valid as LHS
What am I missing or doing wrong?