# v-for Pada Array Refs
breaking
Pada Vue versi 2, penggunaan atribut ref
di dalam v-for
akan mengisi properti $refs
dengan sebuah ref
array. Perilaku tersebut menjadi ambigu dan tidak efisien ketika dilakukan pada v-for
bersarang.
Pada Vue versi 3, penggunaan tersebut tidak akan secara otomatis membuat sebuah array pada $refs
. Untuk mendapatkan banyak ref
sekaligus dalam satu binding, bind ref
pada sebuah fungsi dimana hal tersebut memberikan lebih banyak fleskibilitas (hal ini merupakan sebuah fitur baru):
<div v-for="barang in daftar" :ref="tetapkanRefBarang"></div>
1
Penggunaan dengan Options API:
export default {
data() {
return {
refBarang: []
}
},
methods: {
tetapkanRefBarang(el) {
if (el) {
this.refBarang.push(el)
}
}
},
beforeUpdate() {
this.refBarang = []
},
updated() {
console.log(this.refBarang)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Penggunaan dengan Composition API:
import { onBeforeUpdate, onUpdated } from 'vue'
export default {
setup() {
let refBarang = []
const tetapkanRefBarang = el => {
if (el) {
refBarang.push(el)
}
}
onBeforeUpdate(() => {
refBarang = []
})
onUpdated(() => {
console.log(refBarang)
})
return {
tetapkanRefBarang
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Ingat bahwa:
refBarang
tidak harus merupakan sebuah array: boleh berupa sebuah objek dimanaref
ditetapkan menggunakan kunci iterasi masing-masing.- Cara ini juga memungkinkan
refBarang
untuk dijadikan reaktif dan dapat diawasi, jika dibutuhkan. - This also allows
itemRefs
to be made reactive and watched, if needed.
# Migration Strategy
V_FOR_REF
COMPILER_V_FOR_REF