将数据从json渲染到vue html模板

Question

I am trying to rendering data to an un-ordered list in Vue using an axios get request. The get request function to my mongoDB database works as intended and I am to retrieve the information that I want. The issue that the information does not render to the template.

<template>
  <div class="reviews">
    <ul v-for="review in reviewData" class="list-unstyled" :key="review._id">
       <b-media tag="li">
        <h3>{{review.name}}</h3>
        <p>{{review.content}}</p>
      </b-media>
    </ul>    
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "PostedReview",
  props: ["reviews"],
  
  mounted () {
    axios.get(`http://localhost:4000/reviews`).then((data) => {        
      const reviews = data.data        
      const reviewData = reviews.filter(review => review.beerId === this.$route.params.beerId)        
      console.log(reviewData)
    })      
  }, 

  
  data() {
    return {
      reviewData: []
    }
  },
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

Assign value to the component scoped variable of your component. You were creating a local variable and assigning a value to it, which will not reflect in your component scoped variable which is accessed in template.

<script>
    import axios from "axios";
    export default {
      name: "PostedReview",
      props: ["reviews"],
      mounted () {
        axios.get(`http://localhost:4000/reviews`).then((data) => {        
          const reviews = data.data        
          this.reviewData = reviews.filter(review => review.beerId === this.$route.params.beerId)        
          console.log(this.reviewData)
        })      
      }, 
    
      
      data() {
        return {
          reviewData: []
        }
      },
    }
    </script>