VueJS custom v-model without value property - this shouldn't work?

0
votes

Based on my understanding of using v-model on a custom component (docs link below) the custom component should either:

  1. Have a property on the data object of "value" since by default v-model is really 'v-bind:value="valuePassed"'
  2. Have a "model" property on the component instance to specify which property to use.

Therefore, why does this fiddle work? https://jsfiddle.net/mpctwfaq/2/

EDIT: This fiddle seems to work on Firefox but not Chrome at the moment...

parent:

<custom-select v-bind:options="formOptions" v-model="formOptionsVModel">

child:

this.$emit("input", this.customArraySelectedOptions)

Specifically, I emit the input event to the parent component with the name of a custom property "customArraySelectedOptions". However, I AM able to update the child component from the parent method by resetting the parent's "formOptionsVModel" property.

I would think based on the documentation the "downward" update should fail since the child's component property is not "value" and does not define a specific property using "model".

Docs: https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

1
javascriptvue.jsvuejs2vue-component
v-model is not really v-bind:value="valuePassed" its a two way binding ....while v-bind is one way binding which means it cannot mutate the data – Abdelillah Aissani

1 Answers

0
votes

v-model is syntax sugar for => 

:value="modelValue" @input="modelValue = $event.target.value"

And hence your variable is being updated.