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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.