个人中心
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:00:29 32 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演示


更多回答

32 4 0
文章推荐： Apache2 Fastcgi php-fpm shows white page(Apache2 Fastcgi php-fpm显示白页)
文章推荐： Change reference to inner struct, or is it possible to change the reference of a reference in rust(将引用更改为内部结构，或者是否可以更改Ruust中引用的引用)
文章推荐： How to use LinearRegression to predict the total number of victims per month(如何使用线性回归来预测每月的受害者总数)
文章推荐： Handlebar template engine looping issue(车把模板引擎循环问题)
bug小助手
个人简介

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

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