Vue组件未加载

Posted 2023-02-16

【中文标题】Vue组件未加载

【英文标题】：Vue components not loading

【发布时间】：2020-03-27 12:14:02

【问题描述】：

我收到了这个有问题的代码库，其中没有加载 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.js 开发工具以了解 Vue 运行时及其状态在后台的样子？

在 vue devtools 中，我看到 并没有别的。如果我用 $vm0 查看控制台，它没有子级。

根据提供的代码，没有别的了。您只是在注册组件。是否有任何实际使用组件的 Vue 标记？控制台是否报告任何错误消息？如果这是一个完全设计的应用程序，其中元素突然消失，这意味着在应用程序中的渲染过程中出现了问题（但是，看起来在发布的代码中不会发生该错误，除非没有嵌入此 JS 的 html 中 ID 为 #app 的 HTML 元素）

有一个#app，这是我检查的第一件事：P。将在初始问题中添加一个组件。

我的意思是，根据您拥有的代码，没有组件被传递给 new Vue 实例，因此即使您发布标记，也不会是通过挂载呈现的标记那个新鲜的 Vue 实例。您需要在new Vue 选项中实际指定一个组件，例如：new Vue(i18n, render: h=>h(RootVueComponentHere)).$mount('#app') 其中RootVueComponentHere 需要是根组件（可能只是一个带有router-view 的组件）

【参考方案1】：

您是否正在使用该 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')

【讨论】：

我已经添加了文件中的导入。不知道如何用我所拥有的来格式化渲染函数。这是 app.js 文件...

@JonYork 那么，当网站/应用程序第一次启动时，第一页是什么？该页面是否有组件？如果没有，您必须创建一个。您已经注册了插件组件，但要真正看到它们，您必须在组件中使用它们，然后通过设置render 属性让new Vue 实例呈现它，如上所示。到目前为止，基本上你所拥有的是一个空白应用程序，其中包含一堆 - 可以使用但不能在任何地方使用的组件。

@gabriel.hayes - 您所写的内容似乎是基于这是一个 SPA 的假设。由于他们使用的是 Blade 模板，我怀疑情况并非如此。所以没有必要有一个初始组件，因为 Vue 组件被嵌入到 php 生成的页面中。 :)