[Solved] Framework7 Vue Starter Fiddle with Data

Questions
1

Starting from the Starter Fiddle I added a Vue data property. Now the starter is broken. Why?

What I changed:

  <f7-block>Tab 1 content: foo should be: {{foo}}</f7-block>

and

 data: {
  	foo: "bar"
  }

TAB1 show no content anymore.

Her is my fiddle: https://jsfiddle.net/zoosky/2f87p02q/19/

Does sombody know how to fix this?

Thanks.

2

It must be
Tab 1 content: foo should be: {{$root.foo}}

3

Great. I fixed it with here https://jsfiddle.net/zoosky/3bLrre3b/1/ with

 <f7-block>Tab 1 content: foo should be: {{$root.foo}}</f7-block>

But why $root. Can you explain?

4

This is how Vue js works. Data is only exposed to component. The component you are loading to tab is a different component so it has own state

1 Like