Question

下面是Vue脚本-关注方法称为notLegalToShip，该方法检查年龄<3岁。

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为“ true”时，将出现警告。我已经在输入中尝试了@ 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

您有几个问题...

在class Academics :: Students :: SchedulesController < ApplicationController初始化程序中初始化name和date_of_birth属性，以便Vue可以对它们进行反应。您甚至可以从您的data()道具中对其进行初始化...
```
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 } }计算属性中使用this.date_of_birth而不是age。这样，它将对通过您的this.child.date_of_birth输入元素进行的更改做出反应。
将v-model="date_of_birth"设为计算属性，那样会更容易
```
childUnder3
```
或者，放弃它，只使用childUnder3() { return this.age < 3 }

使用上述方法，您不再需要任何v-if="age < 3"或@input事件监听器。

VUE：更改未触发@input

1 个答案: