简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
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)?
P粉738346380
P粉738346380 2024-03-29 22:31:39
0
1
339

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粉738346380
P粉738346380

membalas semua(1)
P粉312195700
P粉3121957002024-03-30 21:46:29 Tingkat 1
  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 }}
      
    
      •
    Suka +0
    Tambah Balasan
    Topik popular
    Lagi>
    Artikel popular
    Tutorial Popular
    Lagi>
    Tutorial berkaitan
    Cadangan popular
    Kursus terkini
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！