# 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

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

Ingat bahwa:

  • refBarang tidak harus merupakan sebuah array: boleh berupa sebuah objek dimana ref 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

Migration build flags:

  • V_FOR_REF
  • COMPILER_V_FOR_REF

Deployed on Netlify.
Pembaruan terakhir: 2021-06-12, 08:35:35 UTC