[Vuejs]-How to call ajax request one time to load data in multiple component instances

by

-1👍

They’ll be the same, because you calling URL with same data: id = 1. You need to use props for your component:

Vue.component('show-title', {
    props: ['id'], // here you defined props
    mounted(){
    fetch('https://jsonplaceholder.typicode.com/todos/'+this.id) // here you fetch todo with ID from props.
    .then(response => response.json())
    .then(json => this.title = json.title);
  },
    data: function () {
    return {
      title: "hello world!"
    }
  },
  template:"<h3>{{title}}</h3>"
});

In your template add :id:

<show-title :id="1"></show-title>
<show-title :id="2"></show-title>
<show-title :id="3"></show-title>
👤Daniel

Leave a comment