nested components and v-model

felek

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.

dobbel

@felek

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

felek

@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)"
        />