[SOLVED] Mounted Event on Back

1

Hello, i have a CRUD page with items, and my app load this items by the mounted Event on Vue.
But when i add a new item in the newItem page and i execute f7.views.main.router.back(); the mounted event does not fire. how can i fire that event on back?

import * as firebase from 'firebase'
import 'firebase/firestore'
import {db} from "../../../js/firebase.js"

export default {
  data() {
    return {
      dataEsts: null,
    };
  },
  computed: {

  },
  methods: {

  },
  mounted() { //I HAVE TO RUN THIS ON BACK
    db.collection("establecimientos").doc("Datos").get().then((doc) => {
        if (doc.exists) {
            console.log("dataEsts: ", doc.data());
            this.dataEsts = doc.data();
        } else {console.log("Documento no encontrado!");}
    }).catch(function(error) {console.log("Error getting document:", error);});
  },
};
2

Hi, i assume you speek spanish from your code.

No uses eventos de vue, no esta mal, pero es mas facil usando los eventos propios de f7.
en tu caso el evento mounted de vue, se ejecuta cuando se monta la pagina. Ademas, f7 guarda 2 paginas en memoria, la actual y la previa. Entonces cuando vas a la pagina newItem y de ahi volves a la pagina del CRUD, esta YA esta en memoria, por eso nunca se ejecuta el evento mounted de vue.

Para que funcione como vos queres, podes usar el evento page:beforein o page:afterin, fijate vos cual te sirve mas.

https://framework7.io/vue/page.html#page-events

page:beforein Event will be triggered when everything initialized and page is ready to be transitioned into view (into active/current position)
page:afterin Event will be triggered after page transitioned into view

ej:

<f7-page @page:beforein='miFuncion'>
  ...
</f7-page>
export default {
  data() {
    return {
      dataEsts: null,
    };
  },
  computed: {

  },
  methods: {
    miFuncion () {
      db.collection("establecimientos").doc("Datos").get().then((doc) => {
        if (doc.exists) {
            console.log("dataEsts: ", doc.data());
            this.dataEsts = doc.data();
        } else {console.log("Documento no encontrado!");}
      }).catch(function(error) {console.log("Error getting document:", error);});
    }
  },
}
1 Like
3

Sos un Crack!!!

Extrañaba los eventos clasicos de f7 (siempre programe con JS puro y ahora me pidieron VUE)

Ahi ya comprendi como usarlo.

Muchas gracias!

2 Likes