V2 Component with dynamic data


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:

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

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.


id like to know this



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.


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?