vue: изменения не вызваны @input

Question

Ниже приведен сценарий vue - метод беспокойства называется notLegalToShip, который проверяет, когда возраст <3. </p>

export default {
  template,
  props: ['child', 'l'],
  created() {
    this.name = this.child.name.slice();
    this.date_of_birth = this.child.date_of_birth.slice();
  },
  data() {
    return {
      edit: false,
      today: moment().format('DD/MM/YYYY'),
      childUnder3: false
    };
  },
  computed: {
    age() {
      var today = new Date();
      var birthDate = new Date(this.child.date_of_birth);
      var age = today.getFullYear() - birthDate.getFullYear();
      var m = today.getMonth() - birthDate.getMonth();
      if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
      }
      return age;
    }
  },
  methods: Object.assign(
    mapActions(['updateChild']),
    {
      notLegalToShip() {
        if(this.age < 3){
          this.childUnder3 = true;
        }
        this.childUnder3 = false; 
      },
      showForm() {
        this.edit = true;
      },
      hideForm() {
        this.edit = false;
      },
      submitForm() {
        this.hideForm();
        this.updateChild({
          child: this.child,
          name: this.name,
          dateOfBirth: this.date_of_birth,
          childUnder3 : this.childUnder3
        });
      }
    }
  )
}

Вот фрагмент моего шаблона.Ввод, как показано ниже. Я хочу, чтобы метод notLegalToShip запускался при нажатии стрелки, меняющей год.Предупреждение будет появляться, когда childUnder3 имеет значение «истина».Я попытался @change, @input на своем входе, но мой метод не сработал вообще:

<div>
  {{childUnder3}}
  {{age}}
  <div class="callout danger" v-if="childUnder3">
      <h2>Sorry</h2>
      <p>Child is under 3!</p>
  </div>
  <div v-if="!edit">
    <a @click.prevent="showForm()" href="#" class="more-link edit-details edit-child">
      <i class="fa fa-pencil" aria-hidden="true"></i>{{ l.child.edit_details }}
    </a>
  </div>
  <form v-show="edit" @submit.prevent="submitForm()">
    <div class="input-wrap">
      <label for="account__child__date-of-birth__date">{{ l.child.date_of_birth }}</label>
      <input id="account__child__date-of-birth__date" type="date" name="date_of_birth" v-on:input="notLegalToShip" v-model="date_of_birth" v-validate="'required'">
      <p class="error-message" v-show="errors.has('date_of_birth')">{{ l.child.date_of_birth_invalid }}</p>
    </div>
  </form>
</div>

Любая помощь, проверяющая мой код выше, будет принята!

Answer 1

У вас есть пара проблем ...

1. Инициализируйте свойства name и date_of_birth в инициализаторе data(), чтобы Vue мог на них реагировать.Вы даже можете инициализировать их из вашей child опоры там ...

   data() {
     return {
       edit: false,
       today: moment().format('DD/MM/YYYY'),
       name: this.child.name // no need to use slice, strings are immutable
       date_of_birth: this.child.date_of_birth
     }
   }
   

2. Используйте this.date_of_birth внутри вашего вычисляемого свойства age вместо this.child.date_of_birth.Таким образом, он будет реагировать на изменения, сделанные через ваш v-model="date_of_birth" элемент ввода.

3. Сделать childUnder3 вычисляемым свойством, так будет проще

   childUnder3() {
     return this.age < 3
   }
   

   Альтернативно, откажитесь от этого и просто используйте v-if="age < 3"

С учетом вышеизложенного вам больше не нужны @input или @change прослушиватели событий.