Bug or I am doing something wrong?

Hi, I use framework7-5.7.1, in my project I

define routes

var routes = [

{
path: ‘/’,
url: ‘./index.html’,
name: ‘home’,
},

{
path: ‘/a/’,
componentUrl: ‘pages/a.html’,
name: ‘a’,
options: {
transition: ‘f7-cover’,
},
keepAlive: true,
routes: [
{
path: ‘/b/’,
componentUrl: ‘pages/b.html’,
name: ‘b’,
options: {
transition: ‘f7-cover’,
},
keepAlive: true,
}
]
},
];

define app variable

var app = new Framework7({
id: ‘io.framework7.testapp’,
root: ‘#app’,
theme: theme,
data: function () {
return {
update: null,
};
},
});

in page A


app.data.update = ‘M’;
console.log(app.data.update) // result M

page A calls page B,

in page B

console.log(app.data.update) // result M
app.data.update = ‘X’;
console.log(app.data.update) // result X

when return to A

on:{
  pageAfterin: function() {
    console.log(app.data.update);    \\results 'X'
  },
},

this is logic and work right the first time

the second time
in page A

app.data.update = ‘M’;
console.log(app.data.update) // result M

page A calls page B

in page B

console.log(app.data.update) // result M
app.data.update = ‘X’;
console.log(app.data.update) // result X

when return to A

on:{

  pageAfterin: function() {
    console.log(app.data.update);    \\results 'M'
  },

},

Why does this happen ? what am I doing wrong ? what do I need to define ?

Thanks for your help.

You have to use setState. not assign directly’
read here:

Router Component | Framework7 Documentation

this.$root.$setState({ firstName: 'Vladimir' })

also, why you use keepAlive? any particular reason?
if not, just let f7 handle the actives pages in dom.

read here:

Routes | Framework7 Documentation

1 Like