Unexpected mounted() issue

Questions
1

The following will only work on a normal reload. I would think this is then a DOM issue, but why would it not work in mounted on load? Appreciate the help!

  <f7-page>
    <li v-for="city of cities" :key="city['.key']">
      {{city.title}} ({{city.startDate}} - {{city.endDate}})
    </li>
</f7-page>
</template>

<script>
  import { db } from '../firebaseDatabase';

  export default {
    name: 'Home',
    data() {
      return {
        cities: [],
      };
    },
    mounted() {
      var cities = this.cities;
      db.collection('cities').where("user", "==", this.$store.getters.user.data.uid)
      .get()
      .then(get => {
        get.forEach(doc => {
          cities.push(doc.data())
        })
      })
      .catch(function(error) {
        console.log("Error getting documents: ", error);
    });
  },
2

What’s not working?

you are usig vue events. try with f7 events.

<f7-page @page:beforein='getMyData'>
...
</f7-page>
...
methods: {
  getMyData () {
    // add mounted logic here
  }
}
...
1 Like
3

Thanks, pvtallulah! Works a treat.