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>

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

任何帮助将不胜感激！

Answer 1

您可以根据用户输入（AKClipRecorder，isUnderThree和year）为month使用computed property：

day

demo

我还想知道，将其作为计算值而不是选择一年的方法是否会占用大量处理能力来进行持续更新。

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

观点：选择年份后触发的一种方法

1 个答案: