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

Is there a way to modify the style value within AngularJS?

When trying to pass context to the interactive node shell, an error message may appear stating "TypeError: sandbox argument must be converted to a context"

Encountering [object, Object] while attempting to display JSON object retrieved from req.body in the console

Define JSON as writeable: 'Error not caught'

Endless [React Native] onFlatList onEndReached callback invoked

How to send a contact form in Wordpress with multiple attachments via email without using any plugins

Learn how to implement a feature in your chat application that allows users to reply to specific messages, similar to Skype or WhatsApp, using

How do you load a map with Vue.js Highmaps?

Crop box overlaying video background

React Router 4 - Optimizing Component Refresh by Remounting Instead of Re-Rendering

Issue involving retrieving keys from multiple classes in a JSON object

The HTML5 camera feature remains active even after navigating to a different page in an AngularJS application

Sending a PDF document and JSON data via an AJAX POST request

Unique trigger for clicking events with customizable widgets in JQuery

Issues encountered when selecting table data for filtering

Transform an operational VueJS component into ReactJS

Developing a Highchart Graph using JavaScript

Understanding the visibility scope in JavaScript's object-oriented programming

validating if Object may be either 'null' or 'undefined'

What could be causing my function to not successfully retrieve elements based on their text content?