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

【问题标题】：How do I set a default value for v-model using computed property如何使用计算属性为 v-model 设置默认值
【发布时间】：2021-07-09 07:34:09
【问题描述】：

我有两个日期输入字段：to 和 from。

我希望用户能够选择我将向后端发送请求的日期。这就是我使用计算机属性的原因 - 在设置器中，我将验证日期以确保 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 给我一个错误：

“fromDateDefault”计算属性中的意外副作用

“toDateDefault”计算属性中的意外副作用

【问题讨论】：

你可以在你的 v-model 中使用计算属性，像 `` 并将 v-model 留空。如果您想检查日期是否在您的范围内，您可以在发送前使用 watcher 或方法。
将 v-model 留空是什么意思？在这种情况下，我还要在数据中留下什么？

标签： vue.js v-model

【解决方案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

【讨论】：