cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimanakah saya boleh membuat senarai yang mengandungi kotak pilihan yang dilampirkan pada objek dalam keadaan yang ditogol arahan v-for (tanpa menogol kotak pilihan lain dalam senarai)?

Saya cuba membuat senarai tugasan pihak pelanggan menggunakan VueJS (2.x). Ini HTML saya: 

    <!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>

Kemudian dalam skrip/app.js saya melakukan ini: 

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

Masalah saya mudah: apabila saya menukar keadaan kotak pilihan dalam senarai yang diberikan (tandakan atau nyahtandakannya), kotak pilihan serta-merta mengikutinya turut menukar keadaan.

Saya tidak faham mengapa ini berlaku dan bagaimana untuk membetulkannya. Jika sesiapa boleh memberitahu saya mengapa perkara ini berlaku (jadi saya tidak perlu kembali ke sini apabila v-for/keadaan suis tidak berkelakuan baik) dan cara membetulkannya, itu bagus!

P粉738346380P粉738346380285 hari yang lalu411

membalas semua(1)saya akan balas

  • P粉312195700

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

    1. Pertama sekali. data中最好使用Function，而不是ObjectJika tidak, ia boleh menyebabkan ralat kemas kini.

    Kerana Function hanya diterima apabila digunakan dalam definisi komponen. 

    // wrong
data: {
    tasks: []
}

// correct
data() {
    return {
        task: []
    }
}
    1. Anda tidak boleh menukar compulated 属性，该属性默认只有一个 Compulated Getter。如果要处理 compated 属性，请给出 计算设置器 terus kepadanya. 
    // 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. Tidak boleh mengikat nilai melalui v-for kerana vue2 tidak mengenali perubahan dalam tatasusunan. 
    

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

    balas
    0
  • Batalbalas