使用 js 文件作为 Vue 组件时出现错误"Failed to mount component: template or render function not defined."

我在Laravel 5.3中使用VUE。我已经与Laravel 5.2合作。但是Laravel 5.3和Vue.js对我来说是新的。所以我正在玩这些对。我已经成功完成了Laravel Passport教程。现在，我要做的是将我的HTML模板放入刀片文件和JS代码中。但是我遇到了这个错误：

[VUE警告]：无法安装组件：未定义的模板或渲染函数。（在组件中找到）

所以我无法理解这个错误的原因，因为我是新的vue.js。如果有人知道答案，这将不胜感激。这是我的代码。

刀片文件

<body>
    <div id="app">
        <tasks></tasks>
    </div>
    <template id="tasks-template">
        <ul class="list-group">
            <li class="list-group-item" v-for="task in list">
                @{{task.body}}
            </li>
        </ul>
    </template>
    <script src="/js/app.js"></script>
</body>

/resources/assets/js/app.js

require('./bootstrap');
Vue.component('tasks', require('./components/Tasks'));
const app = new Vue({
    el: '#app'
});

/resources/assets/js/components/tasks.js

export default {
    template: '#tasks-template',
    data: function () {
        return {
            list: ''
        };
    },
    created: function() {
        this.$http.get('/api/tasks').then((response) => {
            this.list = response.body;
        }, (response) => {
            alert(0);
        });
    }
}

update

刀片文件

<body>
    <div id="app">
        <tasks></tasks>
    </div>
</body>

/resources/assets/js/components/tasks.js

template: require('../components/tasks-template.html'),

而不是

template: '#tasks-template'

/resources/assets/js/components/tasks-template.html

<ul class="list-group">
    <li class="list-group-item" v-for="task in list">
        {{task.body}}
    </li>
</ul>

但是现在遇到此错误。

未被发现的错误：模块解析失败：/var/www/html/casesync/resources/assets/js/components/components/tasks-template.html意外令牌（1：0）您可能需要一个适当的加载程序来处理此文件类型。 | | |@{{task.body}}

，假设您的模板文件为

/*  resources/assets/js/components/tasks.template.html */
<div class="tasks-component component">
    <ul class="list-group">
        <li class="list-group-item" v-for="task in list">
            {{task.body}}
        </li>
    </ul>
</div>

然后任务为

/*  resources/assets/js/components/Tasks.js  */
export default {
    template: require('./tasks.template.html'),
    data: function () {
        return {
            list: ''
        };
    },
    created: function() {
        this.$http.get('/api/tasks').then((response) => {
            this.list = response.body;
        }, (response) => {
            alert(0);
        });
    }
}

您可以将您的app.js作为

/*  app.js  */
require('./bootstrap');
Vue.component('tasks', require('./components/Tasks').default);
const app = new Vue({
    //el: '#app'
}).$mount('#app'); 
//your main index.php or entry point could be  
<body>
<div id="app">
    <tasks></tasks>
</div>
</body>

update

对于默认/离框webpack配置要在laravel5.3上使用，您需要通过NPM

拉入html-loader

npm install html-loader --save-dev

然后在Gulpfile.js中 - 指定用于.html文件的html-loader。

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2'); 
const config = {
  module: {
    loaders:[
        {
            test: /.html$/,
            loader: 'html'
        }
    ]
  }
};
 elixir((mix) => {
   mix.sass('app.scss')
     .webpack('app.js', null, null, config);
 });

最后，您可以在主/条目文件中注册全局组件app.js为

Vue.component('test-component', require('./test-component').default);
/*  Or using ES2015 import */
import TestComponent from './test-component';
Vue.component('test-component', TestComponent);

我从@alfa那里得到了

的帮助

应该需要（'./组件/example.vue'）。默认值。自V13以来

i在导入VUE组件时也有相同的问题。您必须更改

Vue.component('tasks', require('./components/Tasks'));

将其更改为

Vue.component('tasks', require('./components/Tasks').default);

相关内容

最新更新

热门标签：