Vue: Tentang bug dari nilai asli kotak centang?

Dibuat pada 11 Jan 2017 · 7Komentar · Sumber: vuejs/vue

Hai.
Saya mengalami masalah yang sangat aneh tentang kotak centang.

<template lang="html">
<div>
    <div v-for="(item,key) in test">
        <input type="checkbox" v-model="item.active">
    </div>
</div>
</template>

<script>
    window.T = [{
            active: false
    }, {
            active: false
    }];

    export default {
        data() {
          return {
              test: T
          }
        },
    methods: {}
}
</script>

Pertama, saya mengetik T[0].active=true di konsol, dan kotak centang pertama dipilih secara normal, tetapi ketika saya menyegarkan browser, saya memilih kotak centang pertama secara manual, dan kemudian mengetik T[0].active=false . Saat ini, Kotak centang pertama tidak akan dihapus centangnya, tetapi yang kedua masih dapat disetel secara normal (benar / salah) melalui konsol.

Mencoba 2.1.0 dan 2.1.8, hasilnya sama, versi chrome adalah 54.0.2824.2

bug

Sumber

moersing

Komentar yang paling membantu

Ini telah diperbaiki melalui # 4639

yyx990803 pada 11 Jan 2017

👍3

Semua 7 komentar

Untuk merender elemen dom stateful (masukan, dll.) Dengan v-for, Anda perlu menambahkan atribut key untuk memastikan bahwa statusnya benar.
https://cn.vuejs.org/v2/guide/list.html#key

Mode default ini valid, tetapi hanya berlaku untuk output rendering daftar yang tidak bergantung pada status sub-komponen atau status DOM sementara (misalnya: nilai input form).

fnlctrl pada 11 Jan 2017

@fnlctrl Terima kasih atas balasan Anda, tapi mungkin saya tidak menjelaskannya dengan jelas. Saya menambahkan kunci seperti yang Anda katakan, dan hasilnya sama. Ada bukti lain yang saya katakan adalah di chrome 55.0.2883.95 di bawah Mac, Tidak peduli apakah kunci ditambahkan atau tidak, itu dapat diatur secara normal.

moersing pada 11 Jan 2017

Tidak dapat mereproduksi. https://jsfiddle.net/1b7cux60/

fnlctrl pada 11 Jan 2017

@fnlctrl klik yang pertama sebelum 3 detik untuk menjadikannya status yang dipilih
https://jsfiddle.net/1b7cux60/5/

moersing pada 11 Jan 2017

Teruslah mengujinya, memang ada masalah
https://jsfiddle.net/Lu3o86wt/
Status kotak centang pada klik terakhir akan salah

<input> terakhir diklik akan tetap dalam keadaan yang salah

Chrome

Tepi

fnlctrl pada 11 Jan 2017

@fnltrl Sebenarnya ini bukan bug. Itu terjadi karena kotak centang masih fokus kami tidak memperbaruinya dengan sengaja. Setidaknya masuk akal untuk input teks, kami mungkin ingin mempertimbangkan kembali input lainnya