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',
    });

现在在我的刀片文件中，我有以下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为＆＃39; app＆＃39;

的div

Answer 1

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

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

您可以在docs中获得有关如何使用的更多详细信息。

试图显示组件模板

1 个答案: