javascript - vue : A method that is triggered on selection of a year

Question

我想编写一个方法来检查年龄属性并在选择年份时触发

脚本:

  <script>
  import {mapGetters, mapActions} from 'vuex'
  import {fieldValidComputer} from '../utils/util'
  import ValidatedInput from './subComponents/ValidatedInput'

  export default {
    inject: ['$validator'],
    data: function() {
      return {
        firstName: '',
        lastName:  '',
        day:       '',
        month:     '',
        year:      '',
        isUnderThree: false
      }
    },
    props: {
      childId:   {required: true},
      canRemove: {required: true},
      inline:    {default: false}
    },
    created: function() {
      this.firstName = this.child.firstName
      this.lastName  = this.child.lastName
      this.day       = this.child.day
      this.month     = this.child.month
      this.year      = this.child.year
    },
    components: {
      'validated-input': ValidatedInput
    },
    methods: Object.assign(
      mapActions(['updateChild', 'removeChild', 'updateQuantity']),
      {
        formUpdate: function() {
          this.updateChild({
            id:            this.childId,
            firstName:     this.firstName,
            lastName:      this.lastName,
            day:           this.day,
            month:         this.month,
            year:          this.year
          })
        },
        delete: function() {
          this.removeChild({ id: this.childId })
        }
      }
    ),
    computed: Object.assign(
      mapGetters(['countryCode', 'getChild', 'numChildren']),
      {
        child: function() {
          return this.getChild(this.childId);
        },
        age: function() {
          var ageDifMs = Date.now() - this.dob.getTime();
          var ageDate = new Date(ageDifMs); // miliseconds from epoch
          return Math.abs(ageDate.getUTCFullYear() - 1970);
        }

      },
    )
  }
  </script>

我已经创建了一个年龄函数来检查 child 的年龄，但我现在想要的是防止有人在 child 输入年龄 < 3 时完全注册。理想情况下，我认为我需要一个使用年龄属性并在选择年份时触发的方法 checkUnderThree 。这应该将本地数据属性 isUnderThree 设置为 true(?)。如果 isUnderThree 为 true，则显示 div 警告消息并对我的 vue 文件进行其他更改。我有逻辑，但不知道如何执行。我还想知道将其作为计算值而不是选择年份时调用的方法是否会占用大量处理能力来进行持续更新。

如有任何帮助，我们将不胜感激!

Answer 1

您可以使用computed property对于 isUn​​derThree，基于用户输入(年、月 和 日):

computed: {
  age() {
    const ageDifMs = Date.now() - this.birthday.getTime();
    const ageDate = new Date(ageDifMs);
    return Math.abs(ageDate.getUTCFullYear() - 1970);
  },
  birthday() {
    const birthday = new Date();
    birthday.setUTCFullYear(this.year);
    birthday.setUTCMonth(this.month);
    birthday.setUTCDate(this.day);
    return birthday;
  },
  isUnderThree() {
    return this.age < 3;
  }
}

demo

I also wonder whether having it as a computed value instead of a method called on selection of a year will take a lot of processing power for the continued update.

计算的属性会被缓存，并且仅当依赖项发生更改时才会重新计算它们。另一方面，每当渲染组件时，模板中的方法都会被重新评估。 [1]