简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

Comment puis-je créer une liste contenant des cases à cocher attachées à un objet dans un état dans lequel une directive v-for bascule (sans cocher les autres cases de la liste) ?

J'essaie de créer une liste de tâches côté client en utilisant VueJS (2.x). Voici mon 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>

Puis dans scripts/app.js j'ai fait ceci : 

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

Mon problème est simple : lorsque je change l'état d'une case à cocher dans une liste donnée (la cocher ou la décocher), la case qui la suit immédiatement change également d'état.

Je ne comprends pas pourquoi cela se produit et comment y remédier. Si quelqu'un pouvait me dire pourquoi cela se produit (pour que je n'aie pas besoin de revenir ici lorsque v-for/switch-state se comporte mal) et comment y remédier, ce serait génial !

P粉738346380P粉738346380203 Il y a quelques jours342

répondre à tous(1)je répondrai

  • P粉312195700

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

    1. Tout d’abord. data中最好使用Function，而不是ObjectSinon, cela pourrait provoquer des erreurs de mise à jour.

    Parce que Function n'est accepté que lorsqu'il est utilisé dans la définition d'un composant. 

    // wrong
data: {
    tasks: []
}

// correct
data() {
    return {
        task: []
    }
}
    1. Vous ne pouvez pas y modifier directement 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. Impossible de lier les valeurs via v-for car vue2 ne reconnaît pas les modifications dans le tableau. 
    

  • 
  {{ 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 }}
      
    
      •

    répondre
    0
  • Annulerrépondre