Vue 3 Watch Example with Props

Ketika Anda mencoba menggunakan watch untuk memantau props langsung dengan watch(props.show, ...), hal ini tidak berfungsi karena props.show bukan properti reaktif langsung. Untuk memantau perubahan props, Anda harus menggunakan fungsi reaktif seperti computed atau mengamati props melalui sebuah fungsi.


Kode berikut menunjukkan cara menggunakan watch untuk memantau perubahan pada props di Vue 3 dengan script setup.

Solusi: Gunakan Fungsi untuk Props dalam watch

<script setup>
import { watch } from 'vue';

// Definisikan props
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});

// Gunakan fungsi untuk memantau props.show
watch(() => props.show, (newVal, oldVal) => {
  console.log('show changed:', newVal, oldVal);
});
</script>
  

Penjelasan:

• watch(() => props.show): Anda perlu membungkus props.show dalam fungsi agar watch dapat melacak perubahan nilai.
• newVal: Nilai baru setelah props berubah.
• oldVal: Nilai lama sebelum props berubah.

Contoh Lengkap:

<template>
  <div v-if="props.show" class="modal">
    <p>Modal is {{ props.show ? 'Visible' : 'Hidden' }}</p>
  </div>
</template>

<script setup>
import { watch } from 'vue';

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});

watch(() => props.show, (newVal, oldVal) => {
  console.log('Show state changed:', oldVal, '->', newVal);
});
</script>

<style>
.modal {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 1rem;
}
</style>
  

Hasil:

1. Ketika nilai show berubah, log berikut akan dicetak di konsol:

Show state changed: false -> true

2. Modal akan muncul jika show bernilai true.