Vue-material stepper：检查输入内容以处理md-continue

Question

我正在尝试使用vue-material stepper制作一个多步骤表单，我想检查输入有效性以允许继续操作。 我在文档中看到我可以使用md-continue中的布尔值禁用“继续”按钮，如下所示：

<md-stepper md-vertical>
      <md-step md-label="Etape 1/5" md-message="Vos coordonnées"
        md-button-continue="Continuer"
        md-button-back="Revenir"
        :md-continue="false">
        <md-input-container>
          <label>Civilite</label>
          <md-input id="civilite"></md-input>
        </md-input-container>
        <md-input-container>
          <label>Nom</label>
          <md-input id="nom"></md-input>
        </md-input-container>
        <md-input-container>
          <label>Prénom</label>
          <md-input id="prenom"></md-input>
        </md-input-container>
        <md-input-container>
          <label>Email</label>
          <md-input id="email"></md-input>
        </md-input-container>
        <md-input-container>
          <label>Téléphone (ex: 0472383254)</label>
          <md-input id="telephone"></md-input>
        </md-input-container>
      </md-step>
      <md-step md-label="Etape 2/5" md-message="Type d'enquête à diligenter">
        <strong>Périmètre</strong>
      </md-step>
    </md-stepper>

但是如果所有输入都正确，我想检查每个输入更改，然后在md-continue中返回true。 有没有办法用检查输入有效性的方法进行md-continue更改？ 感谢

编辑（回答菲尔）：

<template>
  <form method="post" class="enqueteForm">
    <md-stepper md-vertical>
      <md-step md-label="Etape 1/5" md-message="Vos coordonnées"
        md-button-continue="Continuer"
        md-button-back="Revenir"
        :md-continue="step1valid">
        <md-input-container>
          <label>Civilite</label>
          <md-input id="civilite" @change="validStep1"></md-input>
        </md-input-container>
        <md-input-container>
          <label>Nom</label>
          <md-input id="nom"></md-input>
        </md-input-container>
        <md-input-container>
          <label>Prénom</label>
          <md-input id="prenom"></md-input>
        </md-input-container>
        <md-input-container>
          <label>Email</label>
          <md-input id="email"></md-input>
        </md-input-container>
        <md-input-container>
          <label>Téléphone (ex: 0472383254)</label>
          <md-input id="telephone"></md-input>
        </md-input-container>
      </md-step>
      <md-step md-label="Etape 2/5" md-message="Type d'enquête à diligenter">
        <strong>Périmètre</strong>
      </md-step>
    </md-stepper>
  </form>
</template>

<script>
  export default {
    name: 'enquete-dialog',
    components: {},
    props: {
      step1valid: Boolean,
    },
    data: {
      step1valid: false,
    },
    methods: {
      validStep1() {
        if (document.querySelector('#civilite').getAttribute('value') !== null) {
          this.step1valid = true;
        }
      },
    },
  };
</script>