Data binding in component in V2


#1

how do i update the data object , and make DOM update

<template>
   <div class=”page”>{{value}}</div>
</template>
<script>
 return {
   data: function () {
     return { value: 123' }
   },
   methods: {
            changeVal: function () {
                this.value = 999; /// NOT UPDATE THE DOM

            }
   }
}
</script>

#2

I’m not sure that data binding (one or two way) already implemented in v2


#3

@Erez are you using Vue? Your example looks like a single Vue component file but with “return” instead of “export”.


#4

i am using framework7 v2 (not using vue).
my example was very basic , i am using ajax call and using {{#each}}

like this :

 <div class="list simple-list">
              <ul>
                {{#each names}}
                  <li>{{this.name}}</li>
                {{/each}}
 </ul>
<div>

i have ajax call every 10 seconds

how do i “refresh” the page so the {{#each names}} will run with the new data ?


#5

I guess you have to “load” the template page again with the mainView.router.load function after your data is updated but I prefer to use Vue for dynamic data binding because the “data” is updated in a magical way :slight_smile:


#6

First set route options to reloadCurrent: true, in routes.js. It replaces the current page with the new one from route.

  path: '/somepage/',
  componentUrl: './pages/somepage.html',
  name: 'somepage',
  options: {
      animate: false,
      reloadCurrent: true,
      },
  ...

Then you can reload the component with

app.router.navigate('/somepage/');


#7

Does anyone know if component data binding is going to be implemented?


#8

did you find a solution?


#9

Use/wait vue.js integration


#10

my solution for “refresh” the data was :

 if (app.views.current.router.url === "/notification/") {
            app.router.back({ animate: false });
            app.router.navigate('/notification/', { animate: false });
   }

work fine , but not so elegant…


#11

UP, please implement it!! My application needs this funcionality a lot!


#12

Every application need this. This seems to be a critical update on V2.


#13

There is a Framework7-Vue if data bindings are critical, and it is highly recommended to use in this case


#14

yeah but’s in the V1 version


#15

Framework7-Vue v2 is also released and ready to be used


#16

That is a great new! I’ve just checked it but I do not find the documentation related. Where I can find it?

Thank you


#17

Docs will be on next week


#18

we can only bind data with Vue? and not in the erez1122 way?