Mengakses Element di Vue

Sekarang kita akan belajar cara mengakses element di Vue. Sebelumnya, kita telah belajar menggunakan input binding yang memungkinkan kita untuk melakukan sinkronisasi antara input dengan state. Dengan input binding kita tidak perlu mengakses element input secara langsung untuk mendapatkan nilainya. Namun, bagaimana jika kita ingin mengakses element tersebut untuk kebutuhan lain? Apakah kita tetap harus menggunakan akses secara langsung dengan document.getElementById? Nah, ternyata Vue memiliki cara yang lebih mudah jika kita mengakses element secara langsung, caranya adalah menggunakan useTemplateRef.

<script setup lang="ts">
import {onMounted, useTemplateRef} from "vue";

const box = useTemplateRef<HTMLDivElement>("box");

onMounted(() => {
  setRed();
});

function setBlue() {
  if (box.value) {
    box.value.className = "blue";
  }
}

function setRed() {
  if (box.value) {
    box.value.className = "red";
  }
}

</script>

<template>
  <div ref="box" v-on="{mouseenter: setBlue, mouseleave: setRed}"></div>
</template>

<style scoped>
div {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}
</style>

Penggunaan useTemplateRef pada Vue ini cukup mudah. Pertama kita harus import dulu librarynya dengan import, selanjutnya kita tinggal menambahkan attribute ref pada element yang ingin kita akses. Untuk lebih jelasnya, mari kita perhatikan contoh sederhana berikut ini.

Pada contoh di atas, kita membuat div di template dengan ref=”box”. Di script kita membuat konstanta box menggunakan function useTemplateRef dengan parameter nilai attribute ref pada template. Konstanta box tersebut adalah state reactive, jadi ketika kita ingin mengaksesnya, kita harus menggunakan box.value. Pada contoh di atas, box.value diikuti dengan nama attribute, yaitu className.

Pada contoh di atas, kita bisa langsung melakukan setting className secara langsung. Nah, bagaimana jika kita ingin menambah atau mengurangi style class? Ternyata caranya cukup mudah, kita bisa menggunakan classList. Untuk menambah, kita gunakan add dan untuk mengurangi kita menggunakan remove. Perhatikan contoh berikut ini.

<script setup lang="ts">
import {useTemplateRef} from "vue";

const box = useTemplateRef<HTMLDivElement>("box");

function setRed() {
  if (box.value) {
    box.value.classList.remove("blue");
    box.value.classList.add("red");
  }
}

function setRound() {
  if (box.value) {
    box.value.classList.add("round");
  }
}

</script>

<template>
  <div ref="box" class="blue"></div>
  <button @click="setRed">Red</button>
  <button @click="setRound">Round</button>
</template>

<style scoped>
div {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.round {
  border-radius: 50%;
}
</style>

Pada contoh di atas, div box sudah memiliki class, yaitu blue. Nah, saat kita klik tombol Red, maka kita remove class blue lalu kita tambahkan class red. Untuk tombol round, ketika kita klik maka kita menambahkan class round pada box.

Mengakses Element di Vue dan Menambah Style

Nah, apakah kita hanya class saja yang bisa dimodifikasi? tentu saja tidak. Kita bisa memodifikasi attribute lain. Kita dapat memodifikasi style dengan cara yang sama dengan classList. Caranya adalah dengan menambahkan property setelah box.value.style. Perhatikan contoh potongan script berikut ini:

function setRed() {
  if (box.value) {
    box.value.style.backgroundColor = "red";
  }
}

Dengan script di atas, kita memberikan style untuk div berupa background-color: red. Karena nama variable tidak bisa menggunakan tanda (-) maka variable tersebut diubah menjadi camel case.

Dengan style kita tidak hanya bisa melakukan setting property. Kita juga bisa melakukan remove property dengan removeProperty(). Penggunaanya removeProperty sedikit berbeda dengan setting property. removeProperty ini berupa function, sehingga kita harus mengisi parameternya. Perhatika contoh potongan script berikut ini.

function setRed() {
  if (box.value) {
    box.value.style.removeProperty("background-color");
    box.value.style.backgroundColor = "red";
  }
}

Perlu diperhatikan, untuk menggunakan removeProperty kita menggunakan nama asli property ya.

Children Element

Nah, saat coding, kita biasanya juga ingin mengkases child element dari element yang kita akses. Apakah cara mengakses element di vue ini bisa digunakan untuk itu? Jawabannya bisa banget. Untuk mengakses child element kita bisa menggunakan children. Children ini bentuknya array, jadi untuk mengaksesnya kita menggunakan index, misalnya box.value.children[0], box.value.children[1], dst. Untuk lebih jelasnya mari kita buat contoh seperti berikut ini:

<script setup lang="ts">
import {onMounted, useTemplateRef} from "vue";

const box = useTemplateRef<HTMLDivElement>("box");
onMounted(() => {
  if (box.value) {
    for (let i = 0; i < box.value.children.length; i++) {
      const child = box.value?.children[i] as HTMLDivElement;
      if (i % 2 == 0) {
        child?.classList.add("red");
      } else {
        child?.classList.add("blue");
      }
    }
  }
});

</script>

<template>
  <div ref="box" class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</template>

<style scoped>
.parent {
  background-color: greenyellow;
  width: 495px;
  height: 85px;
  padding: 10px;
}

.child {
  background-color: red;
  width: 80px;
  height: 80px;
  border: 1px solid black;
  float: left;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

</style>

Pada contoh di atas kita punya box yang didalamnya terdapat 6 child. Nah, di script kita melakukan iterasi terhadap 6 child tersebut. Saat melakukan iterasi, kita cek, indexnya, jika indexnya genap, maka warnanya merah, tapi jika indexnya ganjil maka warnanya biru. Mungkin teman-teman akan berfikir, kok bisa item pertama warnanya merah, kan dia ganjil? Oke, ingat ya, index array dimulai dengan 0, bukan dengan 1. Mungkin teman-teman juga bertanya lagi, kenapa ada tanda tanya? tanda tanya itu memastikan bahwa child exist. Jika tidak exist, maka tidak akan diproses.

Nah, demikianlah sedikit penjelasan beberapa cara mengakses element di vue. Sebenarnya masih banyak sekali cara-cara yang bisa digunakan. Misal, untuk input kita bisa menggunakan .focus. Untuk lebih jelasnya, teman-teman bisa mengakses dokumentasi di vue ya. Selamat belajar, semoga materi ini bermanfaat untuk kita semua.