关键词：
【中文标题】尝试使用 Axios 和 Vue Bootstrap 表显示来自 API 的数据【英文标题】：Trying to use Axios and Vue Bootstrap table to display data from 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>
如果有人可以帮助我或指导我，将非常感谢
【问题讨论】：
【参考方案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
【讨论】：
使用 Vue、Axios 和 Mocha 对 HTTP 请求进行单元测试
...【发布时间】：2017-06-0523:48:03【问题描述】：我真的很难尝试使用Mocha/Chai-Sinon在VueJS中测试请求，使用Axios作为请求库，并尝试了Moxios和axios-mock-adaptor的混合。下面的例子是后者。我要做的是在创建组件时发出请 查看详情
使用 Vue.js、Axios 和 Django 过滤对象
...【问题描述】：我有一个使用Vue.js和Django的项目。我正在尝试通过简单的搜索从数据库中获取列表。在Vue/Axios中，我有它：varfood=\'CHICKEN\'consturl=`$API_URL/api/list_food_compo 查看详情
使用 vue js 和 axios 上传多个文件
...daxios【发布时间】：2019-06-2810:06:38【问题描述】：我正在尝试使用vuejs和axios上传多个图像，但在服务器端我得到了空对象。我在标题中添加了multipart/form-data但仍然是空对象。submitFiles()/*Initializetheformdata*/letformData=ne 查看详情
如何使用 axios 在 Vue 应用程序中获取、更新和渲染数据？
...axios?【发布时间】：2021-05-1014:25:46【问题描述】：我正在尝试从axiosget请求中获取数据，然后尝试从另一个axiosget请求的响应中更新它。但是，我无法呈现来自第二个请求的数据。示例代码摘录为：//api.js//fetchitems-firsta 查看详情
Vue Axios - 使用 bootstrapVue 和 vuex，上传文件和文本仍有问题？
...时间】：2020-01-3021:32:34【问题描述】：我有vueSPA，我正在尝试上传一些图片和文本。我尝试使用邮递员来测试我的服务器代码并且它可以工作，但我的客户端仍然错误。我想我仍然误认为是句柄re 查看详情
使用 axios cors 策略错误配置 nodejs rest api 服务器和 vue 项目
...】：2021-02-2614:03:14【问题描述】：正如标题所说，我正在尝试配置一个运行节点js的本地restapi服务器，同时我有一个带有axios的vue项目。我浏览了整个互联网，尝试了每个服务器/客 查看详情
尝试使用 gcs json api、axios、vue3、quasar 和 node14 执行单个块可恢复上传到谷歌云存储时出现 cors 错误
】尝试使用gcsjsonapi、axios、vue3、quasar和node14执行单个块可恢复上传到谷歌云存储时出现cors错误【英文标题】：Gettingcorserrorswhentryingtoperformasinglechunkresumableuploadtogooglecloudstorageusinggcsjsonapi,axios,vue3,quasarandnode14【发布时间】：2022-01-... 查看详情
使用 Axios 将数据从 Vue.js 传递到 PHP
...gAxios【发布时间】：2019-01-2012:49:14【问题描述】：我正在尝试将一些数据从在Vue.js中完成的GUI传输到使用Axios的PHP文件。我尝试了GET和POST参数，但它不起作用：我在这个index.phpform中输入数据：index.php:<!DOCTYPEHTML>< 查看详情
页面变化时用 axios 和 vue 改变数据
...change【发布时间】：2021-02-1401:19:10【问题描述】：我正在尝试使用vue和axios获取动态数据。当我单击链接路径时，数据必须更改。这是我的TheUpperOrLower.vue示例：<template><div><h2>title</h2&g 查看详情
在 ASP.NET Core 中使用 Axios 和 Vue.JS 进行多文件上传
...ETCore【发布时间】：2018-08-2713:56:32【问题描述】：我正在尝试使用vue.js和axios上传多个文件/图像。我的后端是ASP.NETCore。但问题是，每当我在请求方法中放置断点时，我的控制器中总是会得到一个Count=0。这是我的简单H 查看详情
Vue js 2 和 Axios 发布请求 - 表单
...t-Form【发布时间】：2017-10-0215:35:14【问题描述】：我正在尝试使用axios发布我的表单，但我无法使用expressjs将数据发送到我的后端这就是我正在做的：<template><formclass=""method="post"@submit.prevent="postNow">&l 查看详情
如何在 Vue 和 Axios 中循环访问 API 端点 JSON 对象？
...s和Vuejs将数据提取到DOM中，但我只能获取整个对象。当我尝试使用v-for指令循环时，它不会输出对象中的特定项目。我是这样使用 查看详情
如何使用 Axios 使用经过身份验证的 API
...hAxios【发布时间】：2020-07-1022:44:41【问题描述】：我正在尝试使用Vue和Laravel构建应用程序。我目前在Laravel中使用护照身份验证进行用户身份验证。但是，当我尝试使用axio从vue组件发出发布请求时，即使我当前已登录，我也会得... 查看详情
Laravel Axios 使用 Vue 失败，状态码 419
...户发布问题的应用程序...当用户单击“询问”按钮时，我尝试使用Vue.js和Axios提交问题。问题：70%的时间问题正确提交，但有30%的时间失败并返回“加载资源失败：服务器响应状态为419（未知状态 查看详情
使用 axios 和 vue.js 取消先前的请求
】使用axios和vue.js取消先前的请求【英文标题】：Cancelpreviousrequestusingaxioswithvue.js【发布时间】：2018-11-0402:24:02【问题描述】：我正在使用axios和vue.js。我已经谷歌了它，并查看了axios文档，但仍然不明白该怎么做。【问题讨论】... 查看详情
vue.js 和 axios 使用但无法在 response.headers 中接收 set-cookie
...onse.headers【发布时间】：2020-06-1210:35:12【问题描述】：我尝试从Vuejscoreui主题调用外部api，但无法在response.headers中接收set-cookie代码如下axios. 查看详情
如何使用 axios 发送数组和表单数据 - Vue
】如何使用axios发送数组和表单数据-Vue【英文标题】：Howtosendarrayandformdatawithaxios-Vue【发布时间】：2021-10-2018:13:25【问题描述】：我正在做一个vue/laravel项目，我想用axios发送一个数组和表单数据。这是我的代码：submit()//TheFormData... 查看详情
vue中使用axios（异步请求）和mock.js模拟虚假数据
一.使用axios1.安装npminstall--save axios2.引用importAxiosfrom‘axios‘Vue.prototype.Axios=Axios二.使用mock1.安装npminstall--savemockjs2.创建mock目录3.创建mock.js4.引用importmockDatafrom‘./mock/mock‘5.使用this.Axios.post 查看详情