尝试显示组件模板

Question

我有一个 vue 组件，/people 是网站上所有人的 json，如下所示：

    <template>
        <div class="col-md-2 col-sm-4 col-xs-6" v-for="people in persons">
            <div class="c-item">
                <a href="" class="ci-avatar">
                    <img src="img/demo/contacts/1.jpg" alt="" class="hoverZoomLink">
                </a>

                <div class="c-info">
                    <strong>@{{ people.name }}</strong>
                    <small></small>
                </div>

                <div class="c-footer">
                    <button class="waves-effect"><i class="zmdi zmdi-person-add"></i> Add
                    </button>
                </div>
            </div>
        </div>
    </template>


    <script>
        export default {

            data: function(){
                return {
                    persons: []
                }
            },

            mounted: function()
            {
                this.getPeople();
            },

            methods:
            {
                getPeople: function() {
                    axios.get("/people").then(function(response) {
                        this.persons = response.data;
                    }.bind(this));
                }
            }
        }
    </script>

该代码在 Example.vue 中，在我的 app.js 中我有以下代码：

    Vue.component('all-people', require('./components/Example.vue'));


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

现在在我的 blade 文件中我有以下 HTML

    @extends('layouts.main')
    @section('content')
        <div class="container">

            <div id="app">
                <all-people></all-people>
            </div>
        </div>
    @stop

当我加载我的页面时，我没有收到任何错误，但是模板没有显示，这是来源：

    <div class="container">
        <div id="app"><!----></div>
    </div>

我正在尝试将组件绑定到 ID 为 'app'

的 div

Answer 1

您必须在 div 和 id = app 中使用 all-people 组件，如下所示：

<div class="container">
    <div id="app">
       <all-people></all-people>
    </div>
</div>

您可以在 docs.

中获得更多关于如何使用的详细信息

尝试显示组件模板

Trying to display a component template

vue.js

vuejs2