如何使用计算属性为 v-model 设置默认值

Question

我有两个日期输入字段：开始日期和开始日期。

我希望用户能够 select 向后端发送请求的日期。这就是我使用计算机属性的原因 - 在 setter 中，我将验证日期以确保 from 小于 to 并且 to 不小于 from。

如何为这些输入设置默认值？

我正在使用计算属性，因此我可以为两个输入设置默认值。一个值设置为现在，另一个设置为 1 周前。

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

然而，eslint 抛出一个错误：

Unexpected side effect in "fromDateDefault" computed property

Unexpected side effect in "toDateDefault" computed property

Answer 1

您可以将 get 和 set 函数添加到您的计算属性。

HTML:

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

JS:

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

您可以在官方文档中阅读有关 setter 和 getter 的更多信息： https://v3.vuejs.org/guide/computed.html#computed-properties

如何使用计算属性为 v-model 设置默认值

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

vue.js

v-model

如何使用计算 属性 为 v-model 设置默认值

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

vue.js

v-model

如何使用计算属性为 v-model 设置默认值