Vue: метод, который запускается при выборе года

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 лет для своего ребенка.В идеале мне нужен метод checkUnderThree, который использует свойство age и запускается при выборе года.Это должно установить для свойства локальных данных isUnderThree значение true (?).Если isUnderThree имеет значение true, отобразите предупреждающее сообщение div и внесите другие изменения в мой файл vue.У меня есть логика, но я не уверен, как это выполнить.Мне также интересно, потребует ли большая вычислительная мощность для продолжения обновления наличия в качестве вычисленного значения вместо метода, вызываемого при выборе года. </p>

Любая помощь будет принята с благодарностью!

Answer 1

Вы можете использовать вычисленное свойство для isUnderThree, основанное на пользовательских вводах (year, month и day):

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

Мне также интересно, потребует ли большая вычислительная мощность для продолжения обновления использование его в качестве вычисленного значения вместо метода, вызываемого при выборе года.

Вычисленные свойства кэшируются, и они переоцениваются только при изменении зависимостей.С другой стороны, методы в шаблоне будут пересматриваться всякий раз, когда отображается компонент. [1]