在项目列表中标记复选框的问题

发布于 2025-01-22 08:50:07 字数 2911 浏览 2 评论 0原文

我有一个vue应用程序：它是要做列表，在添加一些注释后，单击按钮添加任务后，我们会收到一个要做的项目列表。在每个项目的正面，我们都有按钮删除和复选框，有机会将其标记为完成。错误是当我将列表中的一个项目标记为检查的一个项目时，然后将其检查为检查标记之后，将其检查到另一个未标记为最初检查的项目。您能否建议使用vue.js或其他任何选项可以解决它？以下是我的代码：

Vue.createApp({
    data(){
        return{
          placeholder: 'Start typing',
          inputvalue: '',
          notes: []
        }
    },
    mounted() {
        this.notes = JSON.parse(localStorage.getItem('note')) || [];
      },
      watch: {
            notes: {
                handler: function() {
                    localStorage.setItem('note', JSON.stringify(this.notes));
                },
                deep: true
            }
        },
    methods: {
        addnewtask(){
            if (this.inputvalue !== ''){
                this.notes.push(this.inputvalue)
                this.inputvalue=''
            }
        },
        removetask(index){
            if (confirm('Do you really want to delete?'))
            this.notes.splice(index, 1)
        }
    }
}).mount(app)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
    <div class="container" id="app">
      <div class="card">
          <h1>To Do List</h1>
          <div class="form-control">
             <input
                 type="text" 
                 v-bind:placeholder="placeholder" 
                 v-model="inputvalue"
                 v-on:keypress.enter="addnewtask"
              />
              <button class="btn" v-on:click="addnewtask">Add Task</button>
            </div>
            <hr />
            <ul class="list" v-if="notes.length !== 0"...>
                <li class="list-item" v-for="(note, index) in notes">
                    <div>
                        <input type="checkbox"/>
                        ({{index+1}}) {{note}}
                    </div>
                    <button class="btn danger" v-on:click="removetask(index)">Delete</button>
                </li>
                <hr />
                <li>
                    <strong>Total: {{notes.length}}</strong>
                </li>
            </ul>
            <div v-else>No task exist, please add first one.</div>
      </div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="Vue3.js"></script>
</body>
</html>

原文

I have a Vue app: it is To Do List, where after adding some notes by clicking button Add Task we receive a list of items to do. On the front of each item we have button Delete and checkbox to have opportunity to mark it as done. The bug is when I for example mark one of the items in the list as checked and after that delete it-marker that it was checked goes to the other item which was not marked as checked initially. Can you please advice how it can be solved using Vue.js or any other option? Below is my code:

Vue.createApp({
    data(){
        return{
          placeholder: 'Start typing',
          inputvalue: '',
          notes: []
        }
    },
    mounted() {
        this.notes = JSON.parse(localStorage.getItem('note')) || [];
      },
      watch: {
            notes: {
                handler: function() {
                    localStorage.setItem('note', JSON.stringify(this.notes));
                },
                deep: true
            }
        },
    methods: {
        addnewtask(){
            if (this.inputvalue !== ''){
                this.notes.push(this.inputvalue)
                this.inputvalue=''
            }
        },
        removetask(index){
            if (confirm('Do you really want to delete?'))
            this.notes.splice(index, 1)
        }
    }
}).mount(app)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
    <div class="container" id="app">
      <div class="card">
          <h1>To Do List</h1>
          <div class="form-control">
             <input
                 type="text" 
                 v-bind:placeholder="placeholder" 
                 v-model="inputvalue"
                 v-on:keypress.enter="addnewtask"
              />
              <button class="btn" v-on:click="addnewtask">Add Task</button>
            </div>
            <hr />
            <ul class="list" v-if="notes.length !== 0"...>
                <li class="list-item" v-for="(note, index) in notes">
                    <div>
                        <input type="checkbox"/>
                        ({{index+1}}) {{note}}
                    </div>
                    <button class="btn danger" v-on:click="removetask(index)">Delete</button>
                </li>
                <hr />
                <li>
                    <strong>Total: {{notes.length}}</strong>
                </li>
            </ul>
            <div v-else>No task exist, please add first one.</div>
      </div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="Vue3.js"></script>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

锦上情书 2025-01-29 08:50:07

代码中的主要问题是，您不存储有关检查哪个任务而不是哪个任务的任何信息。请说您检查了第三任务，然后将其删除，从顶部开始的新第三项将自动检查一下没有有关任务的信息，因此无法区分新任务和已删除任务。

这可以多种方式解决，一种简单的解决方案是，在您的Notes数组存储两种类型的数据中。一个title，一个是iSCHEECKED然后在模板中v-Model的检查值。

更新您的addNewTask（）这样的函数，

    addnewtask() {
      if (this.inputvalue !== "") {
        this.notes.push({
          title: this.inputvalue,
          isChecked: false,
        });
        this.inputvalue = "";
      }
    },

在html中使用v-modal添加note> note.ischecked和update note Note 喜欢note.title因为Note当前是一个对象。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To Do List</title>
  </head>
  <link rel="stylesheet" href="style.css" />
  <body>
    <div class="container" id="app">
      <div class="card">
        <h1>To Do List</h1>
        <div class="form-control">
          <input
            type="text"
            v-bind:placeholder="placeholder"
            v-model="inputvalue"
            v-on:keypress.enter="addnewtask"
          />
          <button class="btn" v-on:click="addnewtask">Add Task</button>
        </div>
        <hr />
        <ul class="list" v-if="notes.length !== 0" ...>
          <li class="list-item" v-for="(note, index) in notes">
            <div>
              <input type="checkbox" v-model="note.isChecked" />
              ({{index+1}}) {{note.title}}
            </div>
            <button class="btn danger" v-on:click="removetask(index)">
              Delete
            </button>
          </li>
          <hr />
          <li>
            <strong>Total: {{notes.length}}</strong>
          </li>
        </ul>
        <div v-else>No task exist, please add first one.</div>
      </div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="Vue3.js"></script>
  </body>
</html>

Here is a vue playgroud

The main issue in you code is, you don't store any information about which task is checked and which one is not.let's say you checked 3rd task and then delete it, the new 3rd item from the top will be auto checked as it has no information about the task so can't differentiate between the new and the deleted task.

This can be solved many way one easy solution is, in your notes array store two types of data. One title and one is isChecked then v-model the checked value in template.

Update your addnewtask() function like this,

    addnewtask() {
      if (this.inputvalue !== "") {
        this.notes.push({
          title: this.inputvalue,
          isChecked: false,
        });
        this.inputvalue = "";
      }
    },

In html use a v-modal to add a two way data binding for the note.isChecked and update note like note.title since note is currently an object now.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To Do List</title>
  </head>
  <link rel="stylesheet" href="style.css" />
  <body>
    <div class="container" id="app">
      <div class="card">
        <h1>To Do List</h1>
        <div class="form-control">
          <input
            type="text"
            v-bind:placeholder="placeholder"
            v-model="inputvalue"
            v-on:keypress.enter="addnewtask"
          />
          <button class="btn" v-on:click="addnewtask">Add Task</button>
        </div>
        <hr />
        <ul class="list" v-if="notes.length !== 0" ...>
          <li class="list-item" v-for="(note, index) in notes">
            <div>
              <input type="checkbox" v-model="note.isChecked" />
              ({{index+1}}) {{note.title}}
            </div>
            <button class="btn danger" v-on:click="removetask(index)">
              Delete
            </button>
          </li>
          <hr />
          <li>
            <strong>Total: {{notes.length}}</strong>
          </li>
        </ul>
        <div v-else>No task exist, please add first one.</div>
      </div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="Vue3.js"></script>
  </body>
</html>

Here is a vue playgroud link for your code demo.

回复收藏 0 原文

~没有更多了~