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

Question

我正在尝试使用 axios get 请求将数据呈现到 Vue 中的无序列表。我的 mongoDB 数据库的获取请求功能按预期工作，我要检索我想要的信息。信息未呈现到模板的问题。

<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>

标签： javascriptmongodbvue.jsaxios

Answer 1

为组件的组件范围变量赋值。您正在创建一个局部变量并为其分配一个值，这不会反映在模板中访问的组件范围变量中。

<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>