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>下应该只有一个孩子。在task-list-template中，您有多个孩子。尝试将它们包裹在1格内

<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

根据A Single Root Element

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

要解决此问题，您可以执行以下操作：

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

Vue组件未显示任何错误

2 个答案: