QInput with QDate in a custom component

RobertIvoire

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

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

RobertIvoire

This post is deleted!

RobertIvoire

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