Pass data from server inside template?

[sasa]

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.

[sasa]

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?

[metalsadman]

@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.