Leveraging Vue.js to showcase API information through attribute binding

Question

Leveraging Vue.js to showcase API information through attribute binding

My application is designed to allow a user to select a Person, and then Vue makes an API call for that user's posts. Each post has its own set of comments sourced from here.

You can view the codepen here

Here is my HTML structure:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id='app'>
<div v-if='isError'>
There was an error
</div>
<div v-else-if='isLoading'>
Loading...
</div>

...

</div>

JavaScript logic implementation:

var app = new Vue({
  el: '#app',
  data: {
    info : null,
    isLoading : true,
    isError : false,
    selectedUser : '',
    postData : null,
    isLoadingPosts : true,
    commentData : null,
  },

 ...

  }
})

Despite everything functioning correctly, I am facing challenges with the comments section as it always seems to be empty. Additionally, I believe there might be some repetitive code in my implementation. Any suggestions or corrections would be highly appreciated. Thank you!

javascript vue.js axios

Answer 1

Answer №1

There are a few issues with the current method being used:

getComments : function (){
    axios
        .get('https://jsonplaceholder.typicode.com/posts/' + this.id + '/comments')
      .then(response => (this.commentData =response.data))
    }
  }

The use of this.id in the code snippet will refer to an id property on the component itself, not the actual id that should be bound to the button.

To fix this issue, update your button code to:

<button v-on:click='getComments(post.id)'>View Comments</button>

And adjust the method like so:

  getComments : function (id){
    axios
        .get('https://jsonplaceholder.typicode.com/posts/' + id + '/comments')
      .then(response => (this.commentData =response.data))
    }
  }

Additionally, consider adding a .catch() handler for error handling purposes as you have done with other axios calls.

Answer 2

There are a few issues with the current method being used:

getComments : function (){
    axios
        .get('https://jsonplaceholder.typicode.com/posts/' + this.id + '/comments')
      .then(response => (this.commentData =response.data))
    }
  }

The use of this.id in the code snippet will refer to an id property on the component itself, not the actual id that should be bound to the button.

To fix this issue, update your button code to:

<button v-on:click='getComments(post.id)'>View Comments</button>

And adjust the method like so:

  getComments : function (id){
    axios
        .get('https://jsonplaceholder.typicode.com/posts/' + id + '/comments')
      .then(response => (this.commentData =response.data))
    }
  }

Additionally, consider adding a .catch() handler for error handling purposes as you have done with other axios calls.

Leveraging Vue.js to showcase API information through attribute binding

Answer №1

Similar questions

Cancel promise chain after action dispatch (rxjs)

What is the method for adding a prefix to every line in JavaScript?

Encountering an incorrect number of parameters for "undefined" during the deployment of a smart contract

Retrieve the values by accessing an element upon clicking the "Submit" button

Utilizing JSON Data with Angular

Tips for effectively passing an array to props in Vue when leveraging Typescript and the class component decorator

Navigating using inertia.js and jetstream in JavaScript implementation

Tips for disabling drag slide functionality in Vue with agility

Tips for restricting User access and displaying specific sections of the menu

Deactivate while maintaining menu options

Retrieving the selected date from mat-datepicker into a FormControl

Using ajax for sending data is a breeze, but I am encountering trouble when attempting to receive data back from

Navigational elements, drawers, and flexible designs in Material-UI

detect mouse click coordinates within an iframe that spans multiple domains

Paper.js: Is there a way to prevent canvas height and width from changing when the window is resized?

The hierarchy of CSS in Vue components

``A bidirectional data exchange mechanism enabling seamless communication between a parent and child

Incorrect data retrieval from JSON object with JQUERY

I am currently studying JavaScript. The syntax of my if statement with && appears to be accurate, however

The transformation of a Raphael element does not occur as expected when it is passed to a function within a loop