Question

我正在使用Vue2来建立基于标签的表单。我在 main.js

中使用

从'vue-form-wizard'
import'vue-form-wizard / dist / vue-form-wizard.min.css'
Vue.use（VueFormWizard）
从'vee-validate'
Vue.use（VeeValidate）

文件 AddUser.vue 包含以下代码：

<script>
import swal from 'sweetalert'

export default {
  methods: {
    validateFirstTab: function () {
      this.$validator.validateAll().then((result) => {
        if (result) {
          return
        }
        swal('Input Field(s) Validation', 'Please correct the errors!', 'error')
      })
    }
  }
}
</script>

<template>
	
	<div class="wrapper" id="add-user-wrapper">

		<section class="content">
			<form-wizard @on-complete="onComplete" 
			          shape="tab"
                      color="#3498db"
                      error-color="#a94442">
                <h2 slot="title">Add a New User</h2>
	            <tab-content title="User Details" :before-change="validateFirstTab">
	            	<div class="row">
			            <div class="col-md-12">
			              <div class="col-md-4">
			                <div class="form-group">
                                <label class="control-label">Name</label>
                                <input v-model="user.name" v-validate data-vv-rules="required|alpha_spaces" data-vv-delay="500" data-vv-as="Name" class="form-control" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="Enter Name" name="name" autofocus="true" />
		                        <i v-show="errors.has('name')" class="fa fa-warning"></i>
		                        <span v-show="errors.has('name')" class="help is-danger">{{ errors.first('name') }}</span>
			                </div>
			                          </div>
                                </form-wizard>
                                </section>
                                </div>
                                <template>

我面临的问题是，每当我尝试验证输入字段时，它都会正确验证，但在控制台上抛出错误：“切换到新选项卡时，”无法读取未定义的属性“。我通过社区搜索只返回一个解决方案，返回一个Promise with resolve（true）总是但仍然不幸的是，即使在第一个选项卡中有效输入，我也无法切换到下一个选项卡（代码未在html下面）。

在这方面，有人可以帮助我解决方法的内容或方法吗？由于我是Vue的新手，如果您需要任何进一步的细节，请告诉我

Answer 1

验证器承诺中缺少返回值。 vue-form-wizard beforeChange函数需要一个布尔值。

这是TabContent组件的beforeChange道具。

  /***
   * Function to execute before tab switch. Return value must be boolean
   * If the return result is false, tab switch is restricted
   */
  beforeChange: {
    type: Function
  },

这是承诺解决后实际发生的事情。

  validateBeforeChange (promiseFn, callback) {
    this.setValidationError(null)
    // we have a promise
    if (isPromise(promiseFn)) {
      this.setLoading(true)
      promiseFn.then((res) => {
   //                 ^^^
  // res is undefined because there is no return value in your case,
 //  error is catched later on.
//
        this.setLoading(false)
        let validationResult = res === true
        this.executeBeforeChange(validationResult, callback)
      }).catch((error) => {
        this.setLoading(false)
        this.setValidationError(error)
      })
      // we have a simple function
    } else {
      let validationResult = promiseFn === true
      this.executeBeforeChange(validationResult, callback)
    }
  },

尝试以下方法：

<script>
import swal from 'sweetalert'

export default {
  methods: {
    validateFirstTab: function () {
      this.$validator.validateAll().then((result) => {
        if (result) {
          return true
        }
        swal('Input Field(s) Validation', 'Please correct the errors!', 'error')
        return false
      })
    }
  }
}
</script>

Vuejs 2：无法在选项卡式

1 个答案: