[Vuejs]-OnBeforeUpdate and onUpdate not triggering on Quasar Vue project

by

3👍

✅

Since you are rendering your variable inside the q-page component so the hook of the parent component will not be triggered.
Let’s consider this example

<!-- App.vue -->
<script setup>
import { ref } from 'vue'
import { onUpdated } from 'vue'
import Test from './Test.vue'

const counter1 = ref(1)
const counter2 = ref(2)
onUpdated(() => {
  console.log('on updated')
})
</script>

<template>
  <Test>
    Counter 1: {{ counter1 }} <br />
    Counter 2: {{ counter2 }} <br />
  </Test>
  <br />
  Counter 1: {{ counter1 }} <br />
  <button @click="counter1++">Increase counter 1</button>
  <button @click="counter2++">Increase counter 2</button>
</template>

<!-- Test.vue -->
<template>
  <div class="test">
    <h1>Test component</h1>
    <slot></slot>
  </div>
</template>

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('on updated inside test component')
})
</script>

When you click on the Increase counter 1 button the hook onUpdated will be triggered in both App.vue and Test.vue.

But when you click on the Increase counter 2 button, the hook onUpdated will be triggered in only the Test.vue component. Because the counter1 variable is rendered inside both App.vue and Test.vue components. And the counter2 variable is rendered only inside the Test.vue components

👤Duannx

Leave a comment