Pass data from server inside template?



  • Hello for all,
    last few days I am with Vue and Quasar, and last two days can’t find example how to pass data (JSON) from another server to page.

    It is multipage application where I have Home and some other pages, and with static data everything works fine (routes are ok).

    I want to get data from another server and show response inside “Tasks” page (dynamic).
    Ajax call and server response are ok (console), but data doesn’t shows and I get this error:

    [Vue warn]: Error in render: "TypeError: task.client is undefined
    

    Here is simplified variant of my template Tasks.vue (in real I use list component from Quasar):

    // Tasks.vue
    // Tasks: list of task
    // Task: { client: { id:'', title:'' }... }
    <template>
      <q-page>
        <div v-for="task in tasks">
          <div>{{task.client.title}}</div>
        </div>
      </q-page>
    </template>
    <script>
     export default {
     data () {
        return {
    	  tasks:[]
        }
      },
      mounted: function(){
    	this.loadData();
      },
      methods: {
    	  loadData () {
    		this.$http.get('http://localhost/pwapi/api/', {params: {tasks:1}})
    			.then((response) => {
    				   return response.json();
    				}).then((result) => {
    				   this.tasks =  result;
    				});
    		}
      }
    }
    </script>
    

    I think that problem is that templete render, but in that moment I still have empty tasks[].
    Also, I try to place Ajax call inside created(), beforeMount() and some other variants but without success.

    Please can you help me to solve this problem.

    Regards.



  • I get working solution using v-if statement to check if I get finished response.

    Here is only html part:

    <template>
      <q-page>
        <div v-if="tasks" v-for="task in tasks">
          <div v-if="task.client" >{{task.client.title}}</div>
        </div>
      </q-page>
    </template>
    

    Is it a way to go, using v-if? Or all this what I am doing here is wrong?



  • @sasa said in Pass data from server inside template?:

    I think that problem is that templete render, but in that moment I still have empty tasks[].
    Yes that is correct, since your api call is async. Your solution should be fine imo.