[SOLVED] Page cache or undefined behavior?

Questions
1

Please help me to figure out what is going wrong.

There is a “simple-page”:

<template>
    <f7-page>
        <div id="placeholder"></div>
    </f7-page>
</template>
<script>
    export default {
        name: "simple-page",
        mounted() {
            const input = document.createElement('input');
            input.type = 'text';
            document.getElementById('placeholder').appendChild(input);
        }
    }
</script>

Now, if I go to the simple-page for the first time I see the input. Then if I go to anotherPage1 and come back to the simple-page the mounted method works but I dont see the input. It shows me clean template like as if the mounted method did not exist. But if I go to anotherPage1, then to anotherPage2 and then come back to the sumple-page everything works fine and I see the input again!

In short:

  1. -> simple-page - works (I see the input)
  2. -> simple-page -> anotherPage1 -> simple-page - doesn’t work (I dont see the input)
  3. -> simple-page -> anotherPage1 -> anotherPage2 -> simple-page (I see the input)
2

change: mounted() => init()

3

There is no init() in Vue.js.

I think problem is in scope, try to make it like this:

        mounted() {
            const input = document.createElement('input');
            input.type = 'text';
            this.$el.querySelector('#placeholder').appendChild(input);
        }

Or with DOM7:

        mounted() {
            this.$$(this.$el).find('#placeholder').append('<input type="text">');
        }
1 Like
4

Я имел ввиду это: https://framework7.io/vue/page.html#page-events page:init

5

This method this.$el.querySelector(’#placeholder’) works. Great, thanks!

My problem was not with the “simple-page”. The real problem was with Picker. I created picker using:

this.$f7.picker.create({
                    inputEl: '#duration-picker',
                    rotateEffect: true,
                    cols: [
                        {
                            textAlign: 'left',
                            values: this.getTimeItems(1, 8),
                            displayValues: this.getTimeItems(1, 8, 'ч')
                        },
                        {
                            values: this.getTimeItems(5, 55),
                            displayValues: this.getTimeItems(5, 55, 'м')
                        },
                    ],
                    toolbarCloseText: 'Готово',
                    formatValue: function (values, displayValues) {
                        return displayValues[0] + ' ' + displayValues[1];
                    },
                });

And the error scenario was the same. But using inputEl: this.$el.querySelector(’#duration-picker’), it works.

6

Это строчка кода ищет элемент во всем DOM. Нужно ограничиться текущей страницей.

7

Но при первом переходе на страницу все таки находится нужный элемент. И дальше если уйти на две страницы вперед и вернуться, то тоже сработает. А если на одну страницу вперед уйти и вернуться, то уже не найдет.

8

Когда не будет работать, посмотрите сколько элементов с id=duration-picker у вас в DOM