[Ionic Vue 3] Reactivity not working?

Ionic Framework Ionic Vue
1

Hello,
Before I use Ionic I had this piece of code:

      <div v-if="curDownloadRate !== -1">
        <p>Download: {{ curDownloadRate.toFixed(2) }} mb/s</p>
      </div>
      <div v-if="curUploadRate !== -1">
        <p>Upload: {{ curUploadRate.toFixed(2) }} mb/s</p>
      </div>

which worked well. The curDownloadRate and curUploadRate were updating every 500ms and thanks to reactivity my DOM was updated with it. Now that I have:

<template>
  <ion-page>
    <ion-content>
      <div v-if="curDownloadRate !== -1">
        <p>Download: {{ curDownloadRate.toFixed(2) }} mb/s</p>
      </div>
      <div v-if="curUploadRate !== -1">
        <p>Upload: {{ curUploadRate.toFixed(2) }} mb/s</p>
      </div>
    </ion-content>
  </ion-page>
</template>

I need to resize my browser to see the values updated in real-time, otherwise, nothing happens. I’m using Ionic-vue 5.4.0 with Vue 3. Do you think it’s some kind of bug from the framework or I’m missing something here?

Thanks!

2

I found why. I was using multiple <ion-content>.
My App.vue had:

<template>
  <ion-app>
    <ion-content>
      <ion-router-outlet/>
    </ion-content>
  </ion-app>
</template>

And my home view had:

<template>
    <ion-content>
      <ion-page>
      </ion-page>
    </ion-content>
</template>

I needed to remove the <ion-content> in my home view

3

The correct answer would be to remove the ion-content in your app.vue.

<template>
  <ion-app>
      <ion-router-outlet/>
  </ion-app>
</template>

Like our base starters, ion-content should only be used in the templates, not wrapped our a router outlet.

1 Like