使用Vue.js+Bootstrap5开发待办列表：新增任务无法显示

核心问题及修复步骤 #

• Vue实例挂载目标错误
  代码里Vue实例挂载到#app，但HTML根容器的ID是createApp，导致Vue完全没接管DOM，所有指令和方法都无法触发。
  修复：把mount('#app')改成mount('#createApp')

• 表单提交默认行为未阻止
  Add按钮是type="submit"，点击会触发表单提交刷新页面，刚添加的任务直接被清空。
  修复：二选一即可：

  • 将按钮类型改为button：<button type="button" class="btn text-white" @click="add">Add</button>
  • 或者在点击事件中阻止默认行为：@click.prevent="add"

• 回车触发的方法不存在
  输入框绑定了@keyup.enter="addItem"，但methods里没有这个方法，回车无法添加任务。
  修复：改成@keyup.enter="add"

• 删除方法名称不匹配
  列表项删除按钮绑定了@click="removeItem(index)"，但methods里只有remove方法，点击会报错。
  修复：把methods中的remove改名为removeItem，并补全删除逻辑：

  removeItem(index) {
      this.items.splice(index, 1);
  }
  

修正后的完整代码 #

<!doctype html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To-Do List: Bootstrap 5 and Vue.js</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css"
        integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!-- Show Todos Here -->
<section class="p-5">
    <div id="createApp" class="container-gray p-3 rounded">
        
        <h1 class="text-white">To-Do List</h1>
        
        <form class="form">
            
            <!-- Input area for tasks. -->
            <div class="d-flex flex-row align-items-center">
                <label class="sr-only" for="taskInput">Task</label>
                <input v-model="newItem" @keyup.enter="add" type="text" class="form-control tasktextbox border-0 text-white container-tasktextbox" id="taskInput" placeholder="What do you need to do today?">
                <button type="button" class="btn text-white" @click="add">Add</button>
            </div>
            
            <ul class="list-group">
                <li v-for="(item, index) in items" :key="index" class="list-group-item">
                    {{ item }}

                </li>
            </ul>

            <!-- Tasks that have been inputted. -->
            <div class="label pt-4">
                <h3 class="text-white">Tasks</h3>
            </div>

            <div class="container-fluid container-tasktextbox py-3 rounded text-white">

                <ul class="list-group">
                    <li v-for="(item, index) in items" :key="index" class="list-group-item">
                        {{ item }}
                        <button @click="removeItem(index)" class="btn btn-danger btn-sm float-end">Remove</button>
                    </li>
                </ul>
                
                <div class="hstack">
                    <div class="col-8">This is where the task will go.</div>
                    <div class="vr"></div>

                    <!-- Edit task button -->
                    <div class="ms-auto d-flex flex-row align-items-center">
                        <button type="button" class="btn text-white">EDIT</button>
                    </div>

                    <!-- Completed task button -->
                    <div class="ms-auto d-flex flex-row align-items-center">
                        <button type="button" class="btn text-white">
                            <i class="fa-solid fa-check"></i>
                        </button>
                    </div>

                    <!-- Delete task button -->
                    <div class="ms-auto d-flex flex-row align-items-center">
                        <button type="button" class="btn text-white">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    </div>
                </div>

            </div>

            <!-- To show completed tasks. -->
            <div class="form-check py-3">
                <input type="checkbox" class="form-check-input" id="uncompletedTasksCheck">
                <label class="form-check-label text-white" for="uncompletedTasksCheck">Only show uncompleted tasks.</label>
            </div>

        </form>
    </div>
</section>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const {createApp} = Vue

    createApp({
        data() {
            return {
                newItem: '',
                items: []
            }
        },
        methods: {
            add() {
                if (this.newItem.trim() !== '') {
                        this.items.push(this.newItem);
                        this.newItem = '';
                    }
            },
            
            complete() {
                // Mark item as complete
            },
            removeItem(index) {
                this.items.splice(index, 1);
            }
        },
        mounted() {
            // Load items from local storage
        }
    }).mount('#createApp')
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Xavier Pough