0

我正在尝试使用 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>
4

0 回答 0