V2 Component with dynamic data

Questions
1

I have an app in F7 V2 using router components. All examples of Template7 using the data object use static data which looks something like so:

<template> 
<div class="page"> 
  <div class="navbar"> 
     <div class="navbar-inner"> 
        <div class="title">{{title}}</div> 
     </div> 
   </div> 
   <div class="page-content"> 
      <a @click="openAlert">Open Alert</a> 
     <div class="list simple-list"> 
        <ul> {{#each names}} <li>{{this}}</li> {{/each}} </ul> 
    </div> 
  </div> 
</div>
</template>
<!-- component styles -->
<style> .red-link { color: red; }
</style>
<!-- rest of component data and methods -->
<script> // script must return component object 
return { 
   data: function () { 
       return { title: 'Component Page', names: ['John', 'Vladimir', 'Timo'], } 
   }
},
</script>

Is there a way to use the data object with dynamic data using an ajax request? It appears the data object is called first on page load and any asynchronous requests would never get loaded into the template? Maybe this is not possible. I’d like to keep all request code in component file.

1 Like
2

id like to know this

3
4

Yes, this is what I originally wrote. pageInit runs after the template is inserted along with the data. So is what you are saying is adding the html manually via pageinit (or some other downstream event) the only way? If so, I just don’t see the value of a static data object when the data is on the server.

I really like the component model but it’s a shame we can’t really use template7 from within it. If I’m wrong, perhaps a example component with dynamic data would be helpful.

5

Sorry, I didn’t see the link in your message until now.

The aync route may be a solution but I don’t like the fact that the code is in the routes object. Isn’t there a way we can have it in the component?

2 Likes
6

Hi, I need push response json api to array in methods, my code is:
Thank you!!!

  return {
    data () {
      return {
        userName: this.$route.params.userName,
        userData: null,
        dataArray: []
      }
    },
    on: {
      pageInit: function (e, page) {
        this.getUserData()
        console.log('parametro desde pagian anterior: ' + this.userName)
      }
    },
    methods: {
      getUserData () {
        // ej llamas a una api
        app.request.json('https://api.dominio.com/userdata/' + this.userName, function (res){
          console.log(res)
           dataArray.push(res)
        })
      }
    }
  }
1 Like
7 
return {
    data () {
      return {
        userName: this.$route.params.userName,
        userData: null,
        dataArray: []
      }
    },
    on: {
      pageInit: function (e, page) {
        this.getUserData()
        console.log('parametro desde pagian anterior: ' + this.userName)
      }
    },
    methods: {
      getUserData () {
        // ej llamas a una api
        var self = this;
        app.request.json('https://api.dominio.com/userdata/' + this.userName, function (res){
          console.log(res)
           self.dataArray.push(res)
        })
      }
    }
  }
1 Like
8

Thank you, and other question please, how to finally I can display data to page, my code es:

{{#each datos}}
  • {{this}}
    • {{/each}}
    9

    I dont know this syntax but it should be your data name instead of datos and this ?

    10

    I explain me better, I have array that be it’s completing in a method from but I need display in my html , I found the following code :

    template
    ul
    {{#each dataArray}}
    li {{this}} /li
    {{/each}}
    /ul
    /template

    return {
    data () {
    return {
    userName: this.$route.params.userName,
    userData: null,
    dataArray: []
    }
    },
    on: {
    pageInit: function (e, page) {
    this.getUserData()
    console.log('parametro desde pagian anterior: ’ + this.userName)
    }
    },
    methods: {
    getUserData () {
    // ej llamas a una api
    var self = this;
    app.request.json(‘https://api.dominio.com/userdata/’ + this.userName, function (res){
    console.log(res)
    self.dataArray.push(res)
    })
    }
    }
    }

    11

    I think it’s simple but the syntax I don’t understand, I know do this with javaScript and jquery but not F7.
    If you have any example would great to I learning more over F7.
    Thank you !!!

    12

    it should be something like this

    <ul>
      <li v-for="record in dataArray" :key='dataArray.id'">
{{record}}
      </li>
</ul>