时间戳

首页 > 解决方案 > Vue组件未加载

vue.js - Vue组件未加载

问题描述

我收到了这个有问题的代码库，其中没有加载 Vue 组件。

Vue 正在安装，但没有任何组件。

这是一个 Laravel 5.7 应用程序，使用刀片模板并添加了一些 Vue。

这是初始代码：

import 'babel-polyfill'
import loadClientScripts from './load-client-scripts'
import 'bootstrap-material-design/js/'
// Vue & axios
import Vue from 'vue'
import { axios } from '../axios-config'

import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'

import { createLocales } from '../vue-i18n-config'
import Noty from 'noty'
//Components
import signInForm from './components/SignInForm'
import signUpForm from './components/SignUpForm'
import forgotPassForm from './components/ForgotPassForm'
// import RegisterToAgency from './components/RegisterToAgency'
import SendEmailForm from './components/SendEmailForm'
import AgencyServiceCategories from './components/AgencyServiceCategories'
import DropdownWithCheckboxes from './components/DropdownWithCheckboxes'
import LasiCoalitionAgencies from './components/LasiCoalitionAgencies'
import ServiceProviders from "./components/ServiceProviders";
import ServiceProvider from "./components/ServiceProvider";
import vSelect from "vue-select";

window.axios = axios

Vue.component('v-select', vSelect)

// Bootstrap Vue    
Vue.use(BootstrapVue)
export function createApp() {
  const i18n = createLocales(window.locale)

  // Components
  Vue.component('sign-in-form', signInForm)
  Vue.component('sign-up-form', signUpForm)
  Vue.component('forgot-pass-form', forgotPassForm)
  // Vue.component('register-to-agency', RegisterToAgency)
  Vue.component('send-email-form', SendEmailForm)
  Vue.component('agency-service-categories', AgencyServiceCategories)
  Vue.component('dropdown-with-checkboxes', DropdownWithCheckboxes)
  Vue.component('lasi-coalition-agencies', LasiCoalitionAgencies)
  Vue.component('service-providers', ServiceProviders)
  Vue.component('service-provider', ServiceProvider)


  new Vue({
    i18n
  }).$mount('#app')

}

登录表单组件，例如：

<template>
  <div>
    <b-form
      id="sign-in-form"
      @submit="onSubmit"
    >
      <div class="form-group">
        <b-form-input
          id="sgi-email"
          v-model="model.email"
          required
          name="email"
          :state="state('email')"
          type="email"
          :placeholder="$t('validation.attributes.email_address')"
        />
        <b-form-feedback>{{ feedback('email') }}</b-form-feedback>
      </div>

      <div class="form-group mb-3">
        <b-form-input
          id="sgi-password"
          v-model="model.password"
          required="required"
          name="password"
          :state="state('password')"
          type="password"
          :placeholder="$t('validation.attributes.password')"
        />
        <b-form-feedback>{{ feedback('password') }}</b-form-feedback>
      </div>
      <div class="form-group my-0">
        <a
          class="text-opacity forgot-pass-link"
          href="#"
        >
          {{ $t('labels.user.password_forgot') }}
        </a>
      </div>
    </b-form>
  </div>
</template>

<script>
  console.log('IM HIT')
export default {
  name: 'SignInForm',
  data() {
    return {
      model: {
        email: '',
        password: ''
      },
      validation: {}
    }
  },
  mounted() {
    this.test()
  },
  methods: {
    test() {
      console.log("test")
    },
    feedback(name) {
      if (this.state(name)) {
        return this.validation.errors[name][0]
      }
    },
    state(name) {
      return this.validation.errors !== undefined &&
        this.validation.errors.hasOwnProperty(name)
        ? 'invalid'
        : null
    },
    onSubmit(evt) {
      evt.preventDefault()
      window.axios
        .post('/login', this.model)
        .then(response => {
          location.href = '/app'
        })
        .catch(e => {
          if (e.response.status === 422) {
            this.validation = e.response.data
            return
          }
        })
    }
  }
}
</script>

任何想法都有帮助！

在示例登录表单中，控制台确实输出了我放置的“Im hit”以确保已加载内容。

谢谢

标签： vue.jslaravel-5vuejs2vue-component

解决方案

您是否随时使用该 Vue 实例渲染任何内容？

尝试将组件传递给它的渲染函数，如下所示：

// lets pretend you've imported a component from some file App.vue up here and called the component simply 'App'
// e.g.: const App = require('./App.vue') or import App from './App.vue';
Vue.use(BootstrapVue)
export function createApp() {
  const i18n = createLocales(window.locale)

  // Components
  Vue.component('sign-in-form', signInForm)
  Vue.component('sign-up-form', signUpForm)
  Vue.component('forgot-pass-form', forgotPassForm)
  // Vue.component('register-to-agency', RegisterToAgency)
  Vue.component('send-email-form', SendEmailForm)
  Vue.component('agency-service-categories', AgencyServiceCategories)
  Vue.component('dropdown-with-checkboxes', DropdownWithCheckboxes)
  Vue.component('lasi-coalition-agencies', LasiCoalitionAgencies)
  Vue.component('service-providers', ServiceProviders)
  Vue.component('service-provider', ServiceProvider)


  new Vue({
    i18n,
    render: createElement => createElement(App) // needs a render function
  }).$mount('#app')

}

推荐阅读