Question

 I am new in vue with laravel. I need to implement vue-form-wizard in project.I am trying to implement vue form wizard with laravel and get **Uncaught TypeError: Cannot read property 'install' of undefined**.  Please suggest.
 Laravel 5.5 with vue 2.5
 install error occur when page load.

 I have not install any external package.
 I follow this link https://jsfiddle.net/CristiJ/bt5dhqtf/1119/
 This is the documentation of vue form wizard and implement vuelidate form wizard but not implement.
http://vuejs.creative-tim.com/vue-form-wizard/?ref=madewithvuejs.com#/?id=form-wizard-props

**这是主要的app.js文件，它以id ** app ****挂载 app.js

 import VueFormWizard from 'vue-form-wizard';
    import 'vue-form-wizard/dist/vue-form-wizard.min.css';
    Vue.use(VueFormWizard);

    Vue.use(window.vuelidate)
    const {
      required,
      minLength,
      email
    } = window.validators
    Vue.use(VueFormWizard)

MyTemplate.vue

这是在资源/资产/组件

中定义的组件文件

    <template>
    <div>
    <form-wizard shape="square" color="#3498db">
      <tab-content title="Personal details" icon="ti-user" :before-change="()=>validateStep('step1')">
        <step1 ref="step1" @on-validate="mergePartialModels"></step1>
      </tab-content>
      <tab-content title="Additional Info" icon="ti-settings" :before-change="()=>validateStep('step2')">
        <step2 ref="step2" @on-validate="mergePartialModels"></step2>
      </tab-content>
      <tab-content title="Last step" icon="ti-check">
        Here is your final model:
       <pre>{{finalModel}}</pre>
      </tab-content>
    </form-wizard>
  </div>
    </template>

<script>
    import Vue from 'vue';
    Vue.use(window.vuelidate.default)
const {
  required,
  minLength,
  email
} = window.validators
Vue.use(VueFormWizard)

Vue.component('step1', {
  template: `<div>
          <div class="form-group" v-bind:class="{ 'has-error': $v.firstName.$error }">
            <label >First name</label>
            <input class="form-control" v-model.trim="firstName" @input="$v.firstName.$touch()">
             <span class="help-block" v-if="$v.firstName.$error && !$v.firstName.required">First name is required</span>
          </div>
          <div class="form-group" v-bind:class="{ 'has-error': $v.lastName.$error }">
            <label>Last name</label>
            <input class="form-control" v-model.trim="lastName" @input="$v.lastName.$touch()">
             <span class="help-block" v-if="$v.lastName.$error && !$v.lastName.required">Last name is required</span>
          </div>

          <div class="form-group" v-bind:class="{ 'has-error': $v.email.$error }">
            <label>Email</label>
            <input class="form-control" v-model.trim="email" @input="$v.email.$touch()">
            <span class="help-block" v-if="$v.email.$error && !$v.email.required">Email is required</span>
            <span class="help-block" v-if="$v.email.$error && !$v.email.email">This is not a valid email!</span>
          </div>
        </div>`,
  data() {
    return {
      firstName: '',
      lastName: '',
      email: ''
    }
  },
  validations: {
    firstName: {
      required
    },
    lastName: {
      required
    },
    email: {
      required,
      email
    },
    form: ['firstName', 'lastName', 'email']
  },
  methods: {
    validate() {
      this.$v.form.$touch();
      var isValid = !this.$v.form.$invalid
      this.$emit('on-validate', this.$data, isValid)
      return isValid
    }
  }
})

Vue.component('step2', {
  template: `<div>
          <div class="form-group" v-bind:class="{ 'has-error': $v.country.$error }">
            <label >Country</label>
            <select class="form-control" v-model.trim="country" @input="$v.country.$touch()">
              <option>USA</option>
                       <option>United Kingdom</option>
                        <option>France</option>
            </select>
             <span class="help-block" v-if="$v.country.$error && !$v.country.required">Country is required</span>
          </div>
          <div class="form-group" v-bind:class="{ 'has-error': $v.city.$error }">
            <label>City</label>
            <input class="form-control" v-model.trim="city" @input="$v.city.$touch()">
             <span class="help-block" v-if="$v.city.$error && !$v.city.required">City is required</span>
          </div>
        </div>`,
  data() {
    return {
      country: '',
      city: ''
    }
  },
  validations: {
    country: {
      required
    },
    city: {
      required
    },
    form: ['country', 'city']
  },
  methods: {
    validate() {
      this.$v.form.$touch();
      var isValid = !this.$v.form.$invalid
      this.$emit('on-validate', this.$data, isValid)
      return isValid
    }
  }
})
new Vue({
  el: '#app',
  data: {
    finalModel: {},
  },
  methods: {
    validateStep(name) {
      var refToValidate = this.$refs[name];
      return refToValidate.validate();
    },
    mergePartialModels(model, isValid){
      if(isValid){
      // merging each step model into the final model
       this.finalModel = Object.assign({},this.finalModel, model)
      }
    }
  }
})
</script>

我按照文档的步骤操作，但收到错误。请提前帮助和谢谢。

我是laravel的新人。我需要在project中实现vue-form-wizard。我正在尝试使用laravel实现vue表单向导并获取 Uncaught TypeError：无法读取属性＆＃39; install＆＃39;未定义。请建议。 Laravel 5.5，vue 2.5 页面加载时会发生安装错误。

 I have not install any external package.
 I follow this link https://jsfiddle.net/CristiJ/bt5dhqtf/1119/
 This is the documentation of vue form wizard and implement vuelidate form wizard but not implement.
http://vuejs.creative-tim.com/vue-form-wizard/?ref=madewithvuejs.com#/?id=form-wizard-props

未捕获的TypeError：无法读取属性＆＃39;安装＆＃39;未定义的

0 个答案: