Clear v-model input from method in Vue2

November 22, 2021

I have a form with two datepickers and a button to clear each one of them as follows:

<template>

    <form>
        <div>
            <datetime id="someDate" v-model="fields.some_date"></datetime>
            <button @click.prevent="clearSomeDate()">X</button>
        </div>

        <div>
            <datetime id="anotherDate" v-model="fields.another_date"></datetime>
            <button @click.prevent="clearAnotherDate()">X</button>
        </div>
    </form>

</template>

<script>

    export default {

        data() {
            return {
                fields: {
                    some_date: null,
                    another_date: null
                },
            };
        },

        methods: {
            
            clearSomeDate() {
                this.fields.some_date = null;
            },

            clearAnotherDate() {
                this.fields.another_date = null;
            },
        },
    }

</script>

And works pretty well, but it’s not so much reusable.

Is there a way to achieve this with a single clearField() function and pass the model as a parameter or something? Should I do my own custom component to make it work?

>Solution :

You could completely get rid of the methods by just doing the assignment directly in the template:

<div>
    <datetime id="someDate" v-model="fields.some_date"></datetime>
    <button @click.prevent="fields.some_date = null">X</button>
</div>

That way you have the clearing logic directly next to the model.

If you want to make it reusable you could also extract it into a separate component:

<template>
    <div>
        <datetime v-bind="$attrs" :value="value" v-on="eventHandlers"></datetime>
        <button @click.prevent="$emit('input', null)">X</button>
    </div>
</template>

<script>
export default {
  name: "datetime-with-x",
  model: { prop: "value", event: "input" },
  props: ["value"],
  inheritAttrs: false,
  computed: {
    eventHandlers() {
      return {
        ...this.$listeners,
        input: ev => this.$emit('input', ev)
      };
    }
  }
};
</script>

and then use it in your component like this:

<template>
    <form>
        <datetime-with-x id="someDate" v-model="fields.some_date" />
        <datetime-with-x id="anotherDate" v-model="fields.another_date" />
    </form>
</template>

<script>
import DatetimeWithX from "./datetime-with-x";

export default {
  name: "your-form",
  components: { DatetimeWithX },
  data() {
    return {
      fields: {
        some_date: null,
        another_date: null
      }
    };
  }
};
</script>