suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wie kann ich eine Liste mit Kontrollkästchen erstellen, die an ein Objekt in einem Zustand angehängt sind, in dem eine v-for-Direktive umschaltet (ohne andere Kontrollkästchen in der Liste umzuschalten)?

Ich versuche, mit VueJS (2.x) eine clientseitige To-Do-Liste zu erstellen. Das ist mein 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>

Dann habe ich in scripts/app.js Folgendes gemacht: 

    '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);
            }
        }
    
    });

Mein Problem ist einfach: Wenn ich den Status eines Kontrollkästchens in einer bestimmten Liste ändere (aktiviere oder deaktiviere), ändert sich auch der Status des Kontrollkästchens direkt danach.

Ich verstehe nicht, warum das passiert und wie ich es beheben kann. Wenn mir jemand sagen könnte, warum das passiert (damit ich nicht hierher zurückkommen muss, wenn sich v-for/switch-state schlecht verhält) und wie ich es beheben kann, wäre das großartig!

P粉738346380P粉738346380300 Tage vor423

Antworte allen(1)Ich werde antworten

  • 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;
          }
        });
      }
    }
  }
});
    

    
  
    To-do List
    
  
    Completed Tasks!
    
  
      
    
    • 
      {{ item.description }}
      
    
      • 
  
    
  
    Uncompleted Tasks!
    
  
      
    
    • 
      {{ item.description }}
      
    
      •

    Antwort
    0
  • StornierenAntwort