尝试使用 Axios 和 Vue Bootstrap 表显示来自 API 的数据答案

【问题标题】：Trying to use Axios and Vue Bootstrap table to display data from API尝试使用 Axios 和 Vue Bootstrap 表显示来自 API 的数据
【发布时间】：2020-12-26 07:28:19
【问题描述】：

大家好，所以我无法将此 API 中的数据显示到我的 Vue 引导表中。

它给了我这个错误： " 属性或方法 "products" 未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中还是对于基于类的组件。 "

问题出在我的 App.vue 中，我在实例上定义了产品。所以我不明白为什么它会抛出这个错误。

这是我的 App.vue

    <template>
    <div id="app" class="container">
        <PagTable :products="products"/>
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios'
import PagTable from './components/PagTable.vue'

const vshredAPI = 'https://app.vshred.com/api/offers?include=images&per_page=25&page=1'

Vue.use(axios)
export default {
        name:"app",

        components: {
            PagTable
        },

        data(){
            return {
                Page:1,
                products: []
            }
        },
        mounted() {
            this.fetchData()
        },
        
        methods: {
            fetchData () {
                axios.get(vshredAPI + this.page)
                    .then(({data}) => {
                        this.products= data
                    })
            }
        }
}
    

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

分页表组件

  <template>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">id</th>
        <th scope="col">Name</th>
        <th scope="col">Image</th>
        <th scope="col">Price</th>
                <th scope="col">Purchase</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product in products" :key="product.id">
        <th scope="row">1
                    {{ products.indexOf(product) + 1 }}
                </th>
        <td>{{product.id}}</td>
        <td>{{product.name}}</td>
        <td>
                    <img v-if="product.image.url" class="image" :src="product.image.url"/>
                </td>
      </tr>
    </tbody>
  </table>  
</template>

<script>
export default {
    name: 'PageTable',

    props: {
        proudcuts: Array
    }
}

</script>
<style scoped>
</style>

如果有人可以帮助我或指导我，将非常感谢

【问题讨论】：

标签： api vue.js axios bootstrap-vue

【解决方案1】：

你的PagTable组件里面有一个错字是写的，当它应该是产品时，另一件事是关于你的v-如果你这样做会很好：

<tbody>
  <tr v-for="(product, index) in products" :key="product.id">
    <th scope="row">
      {{ index + 1 }}
    </th>
    <td>{{product.id}}</td>
    <td>{{product.name}}</td>
    <td>
      <img v-if="product.image.url" class="image" :src="product.image.url"/>
    </td>
  </tr>
</tbody>

如您所见，您可以从 v-for 获取 index 属性，而不是使用 products 对象，有关更多信息，请查看链接中的文档：https://br.vuejs.org/v2/guide/list.html

【讨论】：