尝试显示组件模板答案

【问题标题】：Trying to display a component template尝试显示组件模板
【发布时间】：2017-02-05 11:28:34
【问题描述】：

我有一个 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',
    });

现在在我的刀片文件中，我有以下 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

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

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

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

您可以在docs获取更多详细使用方法。

【讨论】：

我有。请参阅上面的 OP。