nested components and v-model
-
Hello i create custom component that wraps quasar components with some default props.
<q-select rounded outlined map-options :name="name" :use-input="search" :clearable="clearable" :class="className" :label="label" :menu-offset="[0, 10]" :bottom-slots="bottomSlots" :options="cOptions" :placeholder="placeholder" v-model="cModel" @filter="filterFn" >
I crate props one of them is model. Now when i pass my model as prop to v-model i get mutation warning so i create local data cModel.
data() { return { cModel: this.model,
And watcher:
model: function (newValue, _) { this.cModel = newValue; },
However i read about passing props to v-model. And after try to implement this.
:value="model" @input="$emit('input', $event.target.value)"
Initial value are pass correct. However update is not working.
How can i fix that not to use internal data cModel. -
You could also
extend
a Quasar component for potential less hassle.https://vuejs.org/v2/api/#extends
https://littlelines.com/blog/2020/03/13/extending-vue-components
https://stackoverflow.com/questions/35964116/how-do-i-extend-another-vuejs-component-in-a-single-file-component-es6-vue-loa -
@dobbel
Yes i use that in one component but only when i want to over js / add props. Here i Also use template. For now i solved it as computed properties. Example:computed: { cVal: { get() { return this.model; }, set(val) { this.$emit("modelChanged", val); }, }, },
and pass it like
v-model="cVal"
to quasar component.After in parent use like this
<inputWithButton ..... :model="form.searchText" @modelChanged="(v) => (form.searchText = v)" />