[SOLVED] Page cache or undefined behavior?

Please help me to figure out what is going wrong.

There is a “simple-page”:

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

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)

change: mounted() => init()

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';

Or with DOM7:

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

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

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:

                    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.

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

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

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