Perilaku Penanganan Atribut

breaking

Info

Perubahan ini merupakan perubahan API internal yang low-level dan tidak berpengaruh pada sebagian besar pengembang.

Gambaran Umum

Berikut merupakan gambaran umum tentang perubahan yang terjadi:

• Menghapus konsep internal tentang atribut yang dapat dienumerasi dan memperlakukan atribut tersebut sama seperti atribut bukan boolean biasa
• MERUSAK: Tidak menghapus atribut bila nilainya merupakan false, melainkan menetapkannya sebagai attr=false. Untuk menghapus atribut, gunakan null atau undefined.

Lanjutkan membaca untuk penjelasan lebih lanjut

Sintaks Vue versi 2.x

Pada Vue versi 2.x, kami memiliki beberapa cara untuk menangani nilai v-bind:

• Untuk beberapa pasangan atribut/elemen, Vue selalu menggunakan atribut (properti) IDLnya seperti value dari <input>, <select>, <progress>, dan lain sebagainya (opens new window).

• Untuk atribut boolean (opens new window)" dan xlinks (opens new window), Vue akan menghapus atribut tersebut bila bernilai 'falsy' (undefined, null atau false (opens new window)) dan menambahkan atribut tersebut (lihat di sini (opens new window) dan di sini (opens new window)).

• Untuk "atribut yang dapat dienumerasi (opens new window)" (untuk saat ini: contenteditable, draggable dan spellcheck), Vue akan mencoba mengubah (opens new window) atribut tersebut menjadi string (Untuk sekarang atribut contenteditable mendapat perlakukan khusus, dapat diperbaiki melalui vuejs/vue#9397 (opens new window)).

• Untuk atribut lainnya, kami menghapus nilai 'falsy' (undefined, null, or false) dan menetapkan nilai lainnya sebagaimana adanya (lihat di sini (opens new window)).

Tabel di bawah ini mendeskripsikan perbedaan dalam cara Vue menangani atribut yang dienumerasi dan atribut biasa yang bukan boolean:

Ekspersi binding	foo normal	draggable enumerated
:attr="null"	/	draggable="false"
:attr="undefined"	/	/
:attr="true"	foo="true"	draggable="true"
:attr="false"	/	draggable="false"
:attr="0"	foo="0"	draggable="true"
attr=""	foo=""	draggable="true"
attr="foo"	foo="foo"	draggable="true"
attr	foo=""	draggable="true"

Dapat dilihat dari tabel di atas, implementasi saat ini mengubah nilai true menjadi 'true' namun menghapus atribut tersebut apabila bernilai false. Perilaku tersebut berujung pada inkonsistensi dan menuntut pengguna untuk mengubah atribut yang bernilai boolean menjadi sebuah string secara manual pada kasus-kasus umum seperti atribut aria-*: aria-selected, aria-hidden, dan lain sebagainya.

Sintaks Vue 3.x

Kami berencana untuk menghapus konsep internal tentang atribut yang dapat dienumerasi dan menangani atribut-atribut tersebut sebagai atribut HTML biasa yang tidak bernilai boolean.

• Keputusan tersebut menyelasikan masalah inkonsistensi antara atribut biasa yang tidak bernilai boolean dan atribut yang dapat dienumerasi.
• Keputusan tersebut juga membuka peluang untuk menggunakan nilai lain selain 'true' dan 'false' atau bahkan kata kunci lain yang belum tersedia, untuk atribut seperti contenteditable

Untuk atribut lainnya yang tidak bernilai boolean, Vue akan berhenti untuk menghapus atribut tersebut apabila atribut tersebut bernilai false dan mengubah nilai tersebut menjadi 'false'.

• Keputusan tersebut menyelesaikan masalah inkonsistensi antara nilai true dan false dan mempermudah penggunaan atribut aria-*

Tabel di bawah ini mendeskripsikan perilaku baru tersebut:

Ekspresi binding	foo normal	draggable enumerated
:attr="null"	/	/ †
:attr="undefined"	/	/
:attr="true"	foo="true"	draggable="true"
:attr="false"	foo="false" †	draggable="false"
:attr="0"	foo="0"	draggable="0" †
attr=""	foo=""	draggable="" †
attr="foo"	foo="foo"	draggable="foo" †
attr	foo=""	draggable="" †

†: diubah

Pengubahan terhadap atribut boolean tidak berubah.

Strategi Migrasi

Atribut yang Dapat Dienumerasi

Penghapusan konsep atribut yang dapat dienumerasi dan attr="false" dapat menghasilkan nilai atribut IDL yang berbeda (yang akan dicerminkan pada keadaan sesungguhnya), yang dideskripsikan seperti berikut:

Atribut yang Dihapus	Atribut IDL dan Nilainya
contenteditable	contentEditable → 'inherit'
draggable	draggable → false
spellcheck	spellcheck → true

Supaya perilaku lama tetap dapat dijalankan, dan karena Anda akan menngubah nilai false menjadi 'false', pada Vue versi 3.x pengembang harus membuat ekspresi v-bind pada atribut contenteditable dan spellcheck agar menghasilkan nilai false atau 'false'.

Pada Vue versi 2.x, nilai yang tidak valid diubah menjadi 'true' untuk atribut yang dapat dienumerasi. Perilaku tersebut biasanya tidak diharapkan dan tidak diinginkan pada kasus skala besar. Pada Vue versi 3.x true atau 'true' harus dinyatakan secara eksplisit.

Mengubah false menjadi 'false', bukan menghilangkan atribut tersebut

Pada Vue versi 3.x, penghapusan atribut harus dinyatakan secara eksplisit dengan menetapkan nilai pada atribut tersebut sebagai null atau undefined.

Perbandingan Perilaku Vue Versi 2.x dan 3.x

Atribut	Nilai v-bind 2.x	Nilai v-bind 3.x	Keluaran HTML
2.x, atribut yang dapat dienumerasi seperti contenteditable, draggable dan spellcheck.	undefined, false	undefined, null	dihapus
	true, 'true', '', 1, 'foo'	true, 'true'	"true"
	null, 'false'	false, 'false'	"false"
Atribut lain yang tidak bernilai `boolean` seperti aria-checked, tabindex, alt, etc.	undefined, null, false	undefined, null	dihapus
	'false'	false, 'false'	"false"