搜尋

首頁  >  問答  >  主體

如何製作一個包含附加到 v-for 指令切換狀態中的物件的複選框的清單(不切換清單中的其他複選框)?

我正在嘗試製作一個使用 VueJS (2.x) 的客戶端待辦事項清單。這是我的 HTML:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>To-do List</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    </head>
    <body>
        
        <div id="app">
            <h1>To-do List</h1>
            <h2>Completed Tasks!</h2>
            <ul>
                <li v-for="item in complete">{{ item.description }}<input type="checkbox" :checked="item.done" @change="item.done = false"></li>
            </ul>
            <h2>Uncompleted Tasks!</h2>
            <ul>
                <li v-for="item in uncomplete">{{ item.description }}<input type="checkbox" :checked="item.done" @change="item.done = true"></li>
            </ul>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/dist/vue.js"></script>
        <script type="module" src="scripts/app.js"></script>
    </body>
    </html>

然後在scripts/app.js 中我這麼做了:

    'use strict'
    
    let app = new Vue({
    
        el      : "#app",
        data    : {
            tasks: [
                { description: 'Say Hello', done: true },
                { description: 'Review Code', done: false },
                { description: 'Read Emails', done: false },
                { description: 'Reply to Emails', done: false },
                { description: 'Wash The Dishes', done: true },
                { description: 'Stop Working', done: true },
            ]
        },
        computed : {
            complete : function() {
                return this.tasks.filter(task => task.done === true);
            },
            uncomplete : function() {
                return this.tasks.filter(task => task.done === false);
            }
        }
    
    });

我的問題很簡單:當我更改給定清單中複選框的狀態(選中或取消選中它)時,緊接在後的複選框也會切換狀態。

我不明白為什麼會發生這種情況以及如何解決它。如果有人能告訴我為什麼會發生這種情況(這樣我就不必在 v-for/switch-state 行為不端時回到這裡)以及如何修復它,那就太棒了!

P粉738346380P粉738346380322 天前439

全部回覆(1)我來回復

  • P粉312195700

    P粉3121957002024-03-30 21:46:29

    1. 首先。 data中最好使用Function,而不是Object,否則可能會導致更新錯誤。

    因為 Function 僅在元件定義中使用時才被接受。

    // wrong
    data: {
        tasks: []
    }
    
    // correct
    data() {
        return {
            task: []
        }
    }
    
    1. 您無法直接變更 compulated 屬性,該屬性預設只有一個 Compulated Getter。如果要處理 compated 屬性,請給出 計算設定器 到它。
    // wrong
    computed: {
        complete(){
          return this.tasks.filter(task => task.done === true);
        },
    }
    
    // right
    computed: {
        complete: {
            get() {
                return this.tasks.filter(task => task.done === true);
            },
            set(value) {
                this.task.forEach((task, index) => {
                    let matched = value.find(({ description }) => description === task.description);
                    if(matched) {
                        this.task[index] = matched;
                    }
                });
            }
        }
    }
    
    1. 無法透過 v-for 綁定值,因為 vue2 無法辨識陣列中的變更。
    
    
  • {{ item.description }}
  • {{ item.description }}

  • new Vue({
      el: "#app",
      data() {
        return {
          tasks: [
            { description: 'Say Hello', done: true },
            { description: 'Review Code', done: false },
            { description: 'Read Emails', done: false },
            { description: 'Reply to Emails', done: false },
            { description: 'Wash The Dishes', done: true },
            { description: 'Stop Working', done: true },
          ]
        };
      },
      computed : {
        complete: {
          get() {
            return this.tasks.filter(task => task.done === true);
          },
          set(value) {
            this.task.forEach((task, index) => {
              let matched = value.find(({ description }) => description === task.description);
              if(matched) {
                  this.task[index] = matched;
              }
            });
          }
        },
        uncomplete: {
          get() {
            return this.tasks.filter(task => task.done === false);
          },
          set(value) {
            this.task.forEach((task, index) => {
              let matched = value.find(({ description }) => description === task.description);
              if(matched) {
                  this.task[index] = matched;
              }
            });
          }
        }
      }
    });
    sssccc
    

    To-do List

    Completed Tasks!

    • {{ item.description }}

    Uncompleted Tasks!

    • {{ item.description }}

    回覆
    0
  • 取消回覆