Vue: <select>terikat dengan array tidak berfungsi dengan benar setelah splice ()</select>
Perhatikan kode berikut:
<div id="demo">
<select v-model="selected" number>
<option v-for="opt in options" :value="$index" number>{{opt}}</option>
</select>
</div>
Dalam <select> , setiap nilai opsi terikat dengan $index . Jika kami melakukan splice() pada options , seperti, options.splice(0,1) , $index tidak disinkronkan dengan benar dengan opsi.
Misalnya, biarkan options=['a','b'] dan HTML yang dirender terlihat seperti (tapi tidak sebenarnya):
<div id="demo">
<select selectedIndex="0">
<option value="0">a</option>
<option value="1">b</option>
</select>
</div>
Setelah options.splice(0,1) , lalu options=['b'] , tetapi HTML yang telah dirender menjadi:
<div id="demo">
<select selectedIndex="0">
<option value="1">b</option>
</select>
</div>
Nilai opsi 'b' tidak menjadi 1, yang seharusnya 0 karena $index . Ini mungkin bukan bug, tapi ini agak aneh.
Di bawah ini adalah demo langsung dari masalah ini:
https://jsfiddle.net/peteranny/trwp98g9/4/
peteranny
Semua 6 komentar
Cukup tambahkan atribut yang dipilih dalam template Anda selected="{{$index == selected}}"
Saya memperbarui demo di sini https://jsfiddle.net/trwp98g9/5/
defcc
pada 1 Okt 2016
@peteranny Dapatkah Anda menjelaskan apa perilaku yang diharapkan?
Setelah options.splice (0,1), lalu options = ['b'], tetapi HTML yang dirender menjadi:
<option value="1">b</option>
Saya tidak mendapatkan hasil yang sama seperti yang Anda berikan dari sini:
Sebelum mengklik hapus:
Setelah mengklik:
Nilai opsi 'b' tidak menjadi 1, yang seharusnya 0 karena $ index
Jadi, seharusnya itu menjadi apa? Nilai 'b' adalah 1 sebelum klik, dan menjadi 0 setelah klik.
fnlctrl
pada 1 Okt 2016
@fnlctrl Um, terima kasih atas pengujian Anda. Saya rasa saya telah menanyakan pertanyaan yang salah.
Menurut pengujian Anda, nilai 'b' memang menjadi 0 setelah diklik.
Pertanyaan saya yang sebenarnya adalah: sekarang nilai 'b' adalah 0, mengapa <select> tidak memilih 'b'?
Seperti yang terlihat pada gambar Anda, <select> tidak memilih opsi apa pun, sedangkan <select> harus memilih opsi dengan nilai 0.
(Dan itulah mengapa saya salah mengira bahwa nilai 'b' tidak berubah.)
peteranny
pada 2 Okt 2016
@peteranny Ini mungkin bug karena selected tetap 0 sedangkan options berubah, dan dom seharusnya mencerminkan perubahan ini, tapi saya tidak yakin ..
Untuk saat ini, Anda dapat mencoba menambahkan selected prop seperti yang disarankan @defcc , (perhatikan bahwa pengikatan kumis untuk props / attrs sudah tidak digunakan lagi di 2.0, jadi gunakan :selected="$index == selected" sebagai gantinya)
Atau Anda dapat menambahkan track-by prop ke <options> , yang mungkin membuat vue merasa aman untuk memperbarui nilai yang dipilih di dom. https://jsfiddle.net/74ncq90w/
fnlctrl
pada 2 Okt 2016
Diuji pada 2.0 dan berfungsi seperti yang diharapkan: https://jsfiddle.net/dycmgzcm/
Jadi saya menandai ini sebagai bug 1.x
fnlctrl
pada 2 Okt 2016
Menutup masalah 1.x karena 1.x sekarang sudah habis masa pakainya dan hanya akan menerima patch keamanan penting.
yyx990803
pada 17 Apr 2018
Masalah terkait
loki0609
·
3Komentar
lmnsg
·
3Komentar
Jokcy
·
3Komentar
loki0609
·
3Komentar
hiendv
·
3Komentar
Komentar yang paling membantu
Diuji pada 2.0 dan berfungsi seperti yang diharapkan: https://jsfiddle.net/dycmgzcm/
Jadi saya menandai ini sebagai bug 1.x