QInput with QDate in a custom component



  • Hello everyone and sorry for the basic question, I’ve never had to do any custom inputs components, and I’ve been trying for 2 hours. I know this is an easy solve for a lot of you, so here goes!

    I have a “custom” input that I use at several places in my application, so I want to refactor this input.
    Its code is the following:

    <q-input stack-label :label="$t('date')" v-model="document.date">
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy>
                      <q-date v-model="document.date" mask="YYYY-MM-DD"></q-date>
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
    

    This works as intended. Now, I am trying to put this input inside a component of its own, and make it work like v-model, but I can’t make it work, and my browser keep saying I’m trying to mutate it directly. Here’s where I’m at:

    The DateInput Component:

    <template>
      <q-input
        stack-label
        :label="label"
        :value="value"
        @input="$emit('input', $event.target.value)" // Also tried v-model
      >
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy>
              <q-date
                :value="value"
                @input="$emit('input', $event.target.value)" // Also tried v-model
                mask="YYYY-MM-DD"
              ></q-date>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
    </template>
    
    <script lang="ts">
    import Vue from 'vue';
    export default Vue.extend({
      name: 'DateInput',
      props: ['value', 'label']
    });
    </script>
    

    And how I use it:

    <date-input :label="$t('date')" v-model="document.date" /> 
    // Also tried passing a normal prop (:date="document.date"), but haven't made it work that way either.
    

    I’ve tried several mix of v-model and/or :value and @input, but I can’t figure it out.
    I’m quite new to VueJS and my application has come a long way, I just never did any custom inputs!
    If anyone has something similar or knows how to solve this, I would greatly appreciate it.
    Thanks!



  • @RobertIvoire have a local model for the value assign the value prop on that, use the local value as your :value on your qinput, then emit that one instead.



  • This post is deleted!


  • @metalsadman Thanks, I deleted my initial reply because I thought it worked but then it didn’t. I fiddle around with what you told me, and for potential future readers, this is how I got it to work:

    The component:

    <template>
      <q-input stack-label :label="label" v-model="date">
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy>
              <q-date
                :value="date"
                @input="updateDate($event)"
                mask="YYYY-MM-DD"
              ></q-date>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
    </template>
    
    <script lang="ts">
    import Vue from 'vue';
    export default Vue.extend({
      name: 'DateInput',
      props: ['value', 'label'],
      data() {
        return {
          date: this.value
        };
      },
      methods: {
        updateDate(date: string) {
          this.date = date;
          this.$emit('input', this.date);
        }
      }
    });
    </script>
    

    How I use it:

    <date-input :label="$t('date')" v-model="document.date" />
    

    Thanks again!


Log in to reply