CODEWITHSUNDEEP
vue.jsvuejs3quasar-framework
Pero122
Pero122

Reputation: 1382

onBeforeUpdate and onUpdate not triggering on Quasar Vue project

I have a simple app with three things:

VERY IMPORTANT: I tried to replicate this on a pure Vue Vite project and I had NO problem there. The onBeforeUpdate and onUpdate hooks did trigger, so I must be Quasar specific or I must be missing something.

Project: enter image description here When I press the increase button the onBeforeUpdate and onUpdate hooks DON'T trigger (they should just do some console.log)

Reproduction URL

https://stackblitz.com/edit/quasarframework-aj9suk?file=src/pages/IndexPage.vue

How to reproduce?

  1. Go to link and wait until the project loads (you see text and btn)
  2. Open console (F12 or Right click and Inspect)
  3. Click the button, counter should increase, but the methods won't trigger

Relevant packages:

Code:

<template>
  <q-page class="flex flex-center">
    <div class="q-pa-lg">
      Open console, you will see that onBeforeUpdate and onUpdated are not being
      triggered when counter is being changed
    </div>
    <div>{{ counter }}</div>
    <button @click="counter++">Increase</button>
  </q-page>
</template>

<script>
import {
  ref,
  onUpdated,
  onBeforeUpdate,
} from 'vue';
export default {
  setup() {
    const increaseCounter = () => {
      counter.value++;
    };
    let counter = ref(1);

    onBeforeUpdate(() => {
      debugger;
      console.log('onBeforeUpdate');
    });
    onUpdated(() => {
      debugger;
      console.log('onBeforeUpdate');
    });
    console.log('setup');

    return {
      increaseCounter,
      counter
    };
  },
};
</script>

Upvotes: 1

Views: 1280

Answers (1)

Duannx
Duannx

Reputation: 8736

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

Upvotes: 4

Related Questions