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

    QInput with QDate in a custom component

    Help
    2
    4
    947
    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.
    • R
      RobertIvoire last edited by

      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!

      metalsadman 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @RobertIvoire last edited by

        @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.

        R 2 Replies Last reply Reply Quote 0
        • R
          RobertIvoire @metalsadman last edited by RobertIvoire

          This post is deleted!
          1 Reply Last reply Reply Quote 0
          • R
            RobertIvoire @metalsadman last edited by

            @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!

            1 Reply Last reply Reply Quote 1
            • First post
              Last post