时间戳

首页 > 解决方案 > 如何使用计算属性为 v-model 设置默认值

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

问题描述

我有两个日期输入字段：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”计算属性中的意外副作用

标签： vue.jsv-model

解决方案

您可以将 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

推荐阅读