Vue组件没有显示没有错误

Question

我正在尝试做一个非常简单的 vue 示例，它不会显示。 我以前做过类似的事情，但这不起作用。

这是一个非常简单的任务列表。 它是一个带有提交按钮的输入，用于将项目添加到列表中。 由于某种原因，组件根本不渲染。 我很迷茫，应该在 vue 上做一个演示。 我希望以此为例。

我真的不确定对此还有什么要说的，但是堆栈溢出不会让我在不输入有关该问题的更多信息的情况下提交此内容。

<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>

我没有收到任何类型的错误消息。

Answer 1

我认为问题是<script id="task-list-template" type="text/x-template"></script>下应该只有 1 个孩子。 在task-list-template中，您有多个孩子。 尝试将它们包装在 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>

在codepen上演示

Answer 2

根据单根元素

每个组件都必须有一个根元素

要修复，您可以执行以下操作：

<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>