How do I set a default value for v-model using computed property

Question

I have two input fields for dates: to and from.

I want the user to be able to select dates that I will send a request to the backend. That is why I am using a computer property - in the setter I will validate the dates to make sure from is less than to and to is not less than from.

How do I set default values for those inputs?

I am using computed properties so I can set default values for both inputs. One value is set to now, the other is 1 week ago.

<template>
<div class="logs-listing-table">
    <div class="mb-1 filter-actions-wrapper">
    <input type="date" v-model="this.fromDate">
    <input type="date" placeholder="this.toDate">
    </div>
  </div>
</template>

<script>
export default {
  name: 'BnbReport',
  data () {
    return {
        fromDate: this.fromDateDefault(),
        toDate: this.toDateDefault()
    }
  },
  computed: {
    fromDateDefault () {
      var previousPeriod = new Date()
      previousPeriod.SetDate(previousPeriod.getDate() - 7)
      previousPeriod.toISOString().substr(0, 10)
      this.fromDate = previousPeriod
      return this.fromDate
      },
      toDateDefault () {
          var today = new Date()
          today.toISOString().substr(0, 10)
          this.toDate = today
          return this.toDate          
      }
  }
}
</script>

However, eslint throws me an error:

Unexpected side effect in "fromDateDefault" computed property

Unexpected side effect in "toDateDefault" computed property

You can use computed properties in your v-model like that ` <input type="date" v-model="fromDateDefault">` and leave the v-model empty. if you want to check that the dates are in your range, you can use a watcher or a method before sending. — RafaelM
– RafaelM, Commented Apr 14, 2021 at 9:10
What do you mean leave the v-model empty? Also what do I leave in data in this case? — grozdeto
– grozdeto, Commented Apr 14, 2021 at 9:33

laurisstepanovs · Accepted Answer · 2022-12-17 12:56:51Z

5

You can add get and set functions into your computed property.

HTML:

<input type="date" v-model="fromDateDefault">

JS:

computed: {
    fromDateDefault: {
      get() {
        //your validation
        return this.fromDate;
      },
      set(val) {
        this.fromDate = val;
      },
    },
  }

You can read more about the setters and getters in the official doc: https://v3.vuejs.org/guide/computed.html#computed-properties

edited Dec 17, 2022 at 12:56

answered Apr 14, 2021 at 10:00

laurisstepanovs

5465 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stack Over a year ago

Alternate Solution => stackoverflow.com/a/54783280/8150371

Collectives™ on Stack Overflow

How do I set a default value for v-model using computed property

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related