Question

使用Laravel 5.3，我在/resources/assets/js/app.js中有以下内容：

require('./bootstrap');

require('./components/test-component'); // custom

const app = new Vue({
    el: '#app'
});

组件test-component.js只是

Vue.component('test-component', {
    data() {
        return {
            someData: '' // does work!
        };
    },
    mounted() {
        console.log('ready'); // does not fire...
    },
    methods: {
        testMethod() {
            console.log('here'); // does not fire...
        }
    }
});

然后在Blade模板中

<test-component>
    <form>
        <!-- a bunch of HTML markup here... -->
        <button type="button" @click="testMethod">Fire a test method...</button>
    </form>
</test-component>

单击按钮时，控制台中不显示任何内容。此外，加载表单时mounted不会触发。同时，someData模型绑定完美无缺！

问题

我在这里做错了什么？

Answer 1

您需要将模板添加到组件选项：

Vue.component('test-component', {
   template: ` <form>
    <!-- a bunch of HTML markup here... -->
    <button type="button" @click="testMethod">Fire a test method...</button>
</form>`,
  //..

});

Answer 2

您应该添加模板：

Vue.component('test-component', {
    data() {
        return {
            someData: '' // does work!
        };
    },
    template: '<div></div>', // add your template here
    mounted() {
        console.log('ready'); // does not fire...
    },
    methods: {
        testMethod() {
            console.log('here'); // does not fire...
        }
    }
});

组件方法不会在Vue中触发

问题

2 个答案: