Vue组件没有显示没有错误

Posted 2023-02-23

【中文标题】Vue组件没有显示没有错误

【英文标题】：Vue component not showing no errors

【发布时间】：2019-11-28 09:24:08

【问题描述】：

我正在尝试做一个非常简单的 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>

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

【问题讨论】：

您是否尝试使用 VueDevTool 来查看发生了什么？

【参考方案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上的演示

【参考方案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>