Using conditional operators in v-model?
If you use eslint-plugin-vue it will complain about ternary in v-model.
ESLint: 'v-model' directives require the attribute value which is valid as LHS. (vue/valid-v-model)
So I'd rather explicitly use a pair of :value
and @input
props.
Like that:
<input
type="text"
class="input"
placeholder="Job title"
:value="experiences[editIndex].title ? experiences[editIndex].title : ''"
@input="experiences[editIndex].title = $event.target.value"
/>
Also, you can use some function for @input, which will check property existence and add it if necessary.
You can use conditional operators with v-model
, but you can't give v-model
a string like you're attempting in your example.
I wouldn't use the same form for editing and creating (might be preference). I would make the form its own component and then make two additional form components for editing and creating.
However, if you really want to handle the logic in each input's v-model
directive, you would need to give it a variable in the last part of the ternary operator. Something like this:
v-model="experiences[i].title ? experiences[i].title : newExperience.title"