No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    nested components and v-model

    Help
    2
    3
    507
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      felek last edited by 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 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @felek last edited by 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

        F 1 Reply Last reply Reply Quote 0
        • F
          felek @dobbel last edited by 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)"
                  />
          
          1 Reply Last reply Reply Quote 0
          • First post
            Last post