Question

在选择设备并填写IMEI编号后，当我单击设备折叠表格中的next按钮时，已提交。现在如何防止这种情况。我正在为next使用按钮，这就是为什么表单已提交？

<b-form class="form-sample" method="POST" 
@submit.prevent="validateBeforeSubmit" @reset="onReset" v-if="show" id="addNewDemo">
  <div role="tablist">
    <b-card class="mb-1" header-tag="header" footer-tag="footer">
      <b-card-header class="p-1" role="tab">
       <b-btn block href="#" v-b-toggle.device class="btn btn-panel"> Select Device </b-btn>
      </b-card-header>
      <b-collapse id="device" visible accordion="demo" role="tabpanel">
        <b-card-body>
          <b-form-group >
            <b-form-radio-group
              id="device"
              buttons
              button-variant="outline-primary"
              v-model="form.device"
              :options="filteredDevices"
              name="device"
            />
          </b-form-group>
        </b-card-body>
        <b-card-footer class="p-0">
          <button class="btn btn-info btn-navigate" v-b-toggle.imeisubmit>
            Next
          </button>
        </b-card-footer>
      </b-collapse>
    </b-card>

    <!-- IMEI number and submit -->
    <b-card class="mb-1" header-tag="header" footer-tag="footer">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-btn block href="#" v-b-toggle.imeisubmit class="btn btn-panel panel-heading collapsed"> Enter IMEI </b-btn>
      </b-card-header>
      <b-collapse id="imeisubmit" accordion="demo" role="tabpanel"><br>
        <b-card-body>
          <label class="col-sm-1 col-form-label">IMEI*</label>
            <input type="text" class="form-control" v-model="form.imei" name="IMEI" v-validate="'required|min:15|max:16'"
              @input="validateAllData"
            />
            <span v-show="errors.has('IMEI')" class="help error">{{ errors.first('IMEI') }}</span>
        </b-card-body>
        <b-card-footer class="p-0">
          <button type="submit" class="btn btn-info mr-2" v-bind:class="{disabled: disableButton}">Submit</button>
          <button type="reset" class="btn btn-light">Cancel</button>
        </b-card-footer>
      </b-collapse>
    </b-card>
  </div>
</b-form>

Answer 1

默认button类型为submit。添加button type = "button"

<button type ="button" class="btn btn-info btn-navigate" v-b-toggle.imeisubmit>
            Next
          </button>

从提交时单击“下一步”按钮现在如何防止这种情况？

1 个答案: