个人中心
gpt4 book ai didi

Troubles using Vue.js to create list for To-Do list with Bootstrap 5(在Bootstrap 5中使用Vue.js创建待办事项列表时遇到问题)

转载 作者：bug小助手 更新时间：2023-10-27 20:26:12 27 4
gpt4 key购买 nike



I'm new to Vue.js. I'm trying to figure out exactly why my list isn't showing up when I define the method. I'm creating a to-do list that will accept input from the user (task), then put the users data into a list so that it can display under the list of tasks. For some reason, it looks as if my add() function isn't even being reached.

我是Vue.js的新手。当我定义方法时，我想弄清楚为什么我的列表没有显示出来。我正在创建一个待办事项列表，它将接受来自用户(任务)的输入，然后将用户数据放到一个列表中，以便它可以显示在任务列表下。由于某些原因，我的Add()函数看起来甚至都没有达到。


<!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="addItem" type="text" class="form-control tasktextbox border-0 text-white container-tasktextbox" id="taskInput" placeholder="What do you need to do today?">
                <button type="submit" 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="submit" class="btn text-white">EDIT</button>
                    </div>

                    <!-- Completed task button -->
                    <div class="ms-auto d-flex flex-row align-items-center">
                        <button type="submit" 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="submit" 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
    
    /* Variables.  */
    // const task = document.getElementById("taskInput");
    // const listContainer = document.getElementById("list-container");

    createApp({
        data() {
            return {
                newItem: '',
                items: []
            }
        },
        methods: {
            add() {
                // Add item
                // if (taskInput.value == '') {
                //     alert("Please enter a task."); 
                // } else {
                //     // let li = document.createElement("li");
                //     li.value = task.value;
                //     this.items.push(this.li)
                // }
                // taskInput.value = '';

                if (this.newItem.trim() !== '') {
                        this.items.push(this.newItem);
                        this.newItem = '';
                    }
            },
            
            complete() {
                // Mark item as complete
            },
            remove() {
                // Deleted item
            }
        },
        mounted() {
            // Load items from local storage
        }
    }).mount('#app')
</script>
</body>
</html>

更多回答
优秀答案推荐

You're trying to mount your Vue instance to an element that doesn't exist. You are targeting an element with id "app"

您正在尝试将Vue实例挂载到一个不存在的元素上。您的目标是ID为“app”的元素


createApp({
...
}).mount('#app')

The body element it looks like you're trying to target has id "createApp"

它看起来像是您试图瞄准的Body元素的id为“createApp”


<div id="createApp" class="container-gray p-3 rounded">

You must mount using the correct id. Either change the mount target, or change the id on the div:

您必须使用正确的ID装载。更改装载目标，或更改div上的ID：


<div id="app" class="container-gray p-3 rounded">


Some other additional issues:

其他一些其他问题：



  1. Using <form> is causing the page to refresh because forms by default refresh the page on submit. Refreshing a Single Page Application will cause loss of data without a specific strategy to maintain it across refreshes. Ditch the <form> element and other form related classes. Forms are good for submitting data to a server via an API call. It seems unneeded here.



  2. @keyup.enter="addItem" exists on the input but addItem isn't a method that exists in your code.



  3. There's a lot of uses of text-white class but when I test the code there is just a plain white background so everything becomes impossible to see.



  4. The first <ul> that displays all the tasks directly under the input seems redundant because there's a second <ul> that does the same thing




When I fix all these issues I get an app that seems to work the way you would expect (given the limited methods available)

当我修复所有这些问题时，我得到了一个似乎可以按照您期望的方式工作的应用程序（考虑到可用的方法有限）


jsfiddle demo

Jsfiddle演示


更多回答

27 4 0
文章推荐： Middleware not executing on Nextjs 13.4 app routing(中间件未在Nextjs 13.4应用程序路由上执行)
文章推荐： Can't I use Vue2.7 with Webpack5?(Vue2.7不能和Webpack5一起使用吗？)
文章推荐： What is this: `impl Trait for T {}`?(这是什么：`Impll特征for T{}`？)
文章推荐： How do I download a file or photo that was sent to my telegram bot using telegraf module?(如何使用Telegram模块下载发送到我的电报机器人的文件或照片？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com