Vue组件没有显示没有错误

Question

I am trying to do a very simple vue example and it won't display. I've done similar things before, but this won't work.

It is an extremely simple task list. It is an input with a submit button that adds an item to a list. For some reason the component does not render at all. I am very lost am supposed to give a presentation on vue. I was hoping to use this as an example.

I'm really not sure what else to say about this, but stack overflow won't let me submit this without typing more information about the issue.

<div id="app">
    <task-list></task-list>
</div>


    Vue.component('task-list-item', {
        props: ["task"],
        template: '#task-list-item-template'
    })

    Vue.component('task-list', {
        data: function () {
            return {
                taskList: [],
                newTask: ''
            }
        },
        methods: {
            addTask: function () {
                var self = this;
                if (self.newTask !== ""
                    && self.newTask !== null
                    && typeof self.newTask !== "undefined") {
                    this.taskList.push(self.newTask);
                    this.newTask = "";
                }
            }
        },
        template: '#task-list-template'
    })



    new Vue({
        el: '#app',
        data: function () {
            return {
            }
        }
    })



<script id="task-list-template" type="text/x-template">
    <input v-model="newTask" />
    <button v-on:click="addTask()">Add Task</button>
    <ul>
        <task-list-item v-for="taskItem in taskList"
                        v-bind:task="taskItem">
        </task-list-item>
    </ul>
</script>

<script id="task-list-item-template" type="text/x-template">
    <li>{{task}}</li>
</script>

I am getting no error messages of any kind.

Answer 1

I think the problem is there should be only 1 child under <script id="task-list-template" type="text/x-template"></script> . In task-list-template , you have multiple children. Try to wrap them in 1 div

<script id="task-list-template" type="text/x-template">
    <div>
    <input v-model="newTask" />
    <button v-on:click="addTask()">Add Task</button>
    <ul>
        <task-list-item v-for="taskItem in taskList"
                        v-bind:task="taskItem">
        </task-list-item>
    </ul>
  </div>
</script>

Demo on codepen

Answer 2

According to A Single Root Element

Every component must have a single root element

To fix you can do some thing like:

<script id="task-list-template" type="text/x-template">
    <div>
        <input v-model="newTask" />
        <button v-on:click="addTask()">Add Task</button>
        <ul>
            <task-list-item v-for="taskItem in taskList" v-bind:task="taskItem">
            </task-list-item>
        </ul>
    </div>
</script>