正文 

当前位置： 首页 > 知识 >

来自嵌套 Axios 请求的 VueJS 数据未在视图中呈现

     2023-02-23     179

关键词：

【中文标题】来自嵌套 Axios 请求的 VueJS 数据未在视图中呈现【英文标题】：VueJS data from nested Axios requests not rendering in view 【发布时间】：2019-01-06 06:55:41 【问题描述】：

我正在尝试使用 VueJS 和 Axios 在页面上列出来自 API 的一组帖子。我面临的问题是需要通过针对该特定帖子的单独 API 调用来检索一段数据（帖子 url），并且它们在初始 API 调用中提供该数据的 url。我的第一部分工作得很好，但是当值 is 出现在 Vue devtools 中时，我无法在视图中渲染 href。

JS

const vm = new Vue(
  el: '#app',
  data: 
    posts: []
  ,
  mounted() 
    this.getPosts();
  ,
  methods: 
    getPosts() 
      axios.get("api_url")
      .then((response) => 
        this.posts = response.data.posts;
        // Get URL for each post from separate API call
        this.posts.map(post => 
          axios.get(post.details_url+"&output=json")
          .then((response) => 
            post.official_url = response.data.post.pet_details_url;
          ).catch( error =>  console.log(error); );
        );
      ).catch( error =>  console.log(error); );
    
  
);

HTML

<div id="app">    
  <div v-for="post in posts">
    <a :href="post.official_url"> //href won't render
      <h2> post.title </h2>
      <p> post.text </p>
    </a>
  </div>
</div>

数据显示在 Vue DevTools 中

【问题讨论】：

添加&lt;div v-for="post in posts" :key="something_unique"&gt;可能会解决您的问题 感谢@TruongDang 的建议，但添加密钥并没有帮助。 :// 看起来很奇怪，我总是使用像 :href= "`/$post.official_url`" 这样的 href 并且它可以工作。确保您的 post.official_url 不为空 :"( 我将其更改为该格式，现在出现了 href，但我得到了 &lt;a href="undefined"&gt;&lt;/a&gt;。所以我认为我的问题更多地与我在 JS 中的设置方式有关。 【参考方案1】：

可能是reactive problem。你可以试试Vue.set

getPosts() 
    let vm = this
    axios.get("api_url")
    .then((response) => 
      this.posts = response.data.posts;
      // Get URL for each post from separate API call

      this.posts.map((post, index) => 
        axios.get(post.details_url+"&output=json")
        .then((response) => 
          post.official_url = response.data.post.pet_details_url;
          Vue.set(vm.posts, index, JSON.parse(JSON.stringify(post)))
        ).catch( error =>  console.log(error); );
      );
    ).catch( error =>  console.log(error); );

【讨论】：

谢谢！这解决了我的问题。另外，感谢您链接解释，我仍在学习 VueJS，所以这是非常感谢的信息。

POST 和 PUT 请求中的问题，使用 axios、vuetify 数据表、vuejs

】POST和PUT请求中的问题，使用axios、vuetify数据表、vuejs【英文标题】：ProbleminPOSTandPUTrequest,withaxios,vuetifydatatable,vuejs【发布时间】：2020-08-0703:03:42【问题描述】：我正在尝试根据我的需要通过实施axios来使用我的api来调整vuetify网... 查看详情

axios GET 请求不返回任何数据（VueJS 和 NodeJS）

】axiosGET请求不返回任何数据（VueJS和NodeJS）【英文标题】：axiosGETrequestdoesn\'treturnanydata(VueJS&NodeJS)【发布时间】：2021-03-2513:28:29【问题描述】：我正在尝试从前端(vueJS)到后端(nodeJS)进行API调用。这是我在后端处理原始api请求... 查看详情

Axios 请求 - 来自 PHP API 的 Gzip 数据

】Axios请求-来自PHPAPI的Gzip数据【英文标题】：AxiosRequest-GzipdatafromPHPAPI【发布时间】：2019-09-2219:38:55【问题描述】：是否可以在PHP中gzcompress数据然后让Axios请求它？我试过这样做，但一直收到此错误：“格式错误的UTF-8字符，可... 查看详情

在 Laravel 护照、vueJS 和 Axios 中获得未经授权的 401

...数据，因此我使用npmiaxios进行API请求，这是我的脚本代码来自App.vue文件：importaxiosf 查看详情

(axios) HTTP POST 请求两分钟后失败，Laravel 5 + VueJS

】(axios)HTTPPOST请求两分钟后失败，Laravel5+VueJS【英文标题】：(Axios)HTTPPOSTrequestfailedaftertwominutes,Laravel5+VueJS【发布时间】：2019-11-0606:13:18【问题描述】：我正在尝试为特定用户复制数据库中的数据。应该复制将近1000行。但是我的... 查看详情

带有 axios 的 VueJS 中的预检请求

】带有axios的VueJS中的预检请求【英文标题】：PreflightrequestinVueJSwithaxios【发布时间】：2018-04-2714:54:08【问题描述】：我有点难以从聚会API中获得响应。我得到的错误：Responsetopreflightrequestdoesn\'tpassaccesscontrolcheck:No\'Access-Control-Allow... 查看详情

在 vuejs 中发送 axios 发布请求

】在vuejs中发送axios发布请求【英文标题】：sendaxiospostrequestinvuejs【发布时间】：2020-05-1203:12:34【问题描述】：我想在vuejs中从我的模板发送axios发布请求，如下代码：<script>exportdefaultdata()returnbody:name:\'ssdsdsd\',time:\'232342\',,head... 查看详情

Axios 未在请求中发送自定义标头（可能是 CORS 问题）

】Axios未在请求中发送自定义标头（可能是CORS问题）【英文标题】：Axiosnotsendingcustomheadersinrequest(possibleCORSissue)【发布时间】：2018-11-0906:02:34【问题描述】：我遇到了一个问题，axios似乎没有随我的请求发送自定义标头。我是这... 查看详情

嵌套映射未在jsx反应中显示数据

...发布时间】：2021-11-1916:01:08【问题描述】：我正在尝试将来自第三方的这种格式的数组中的数据映射到jsx，但它似乎没有显示任何内容。这是我要映射的数组。[["id":"file1","link":"link.com","type":"video","overview":"Loremipsumd 查看详情

从 Vuejs 到 Django REST 框架的 Axios POST 请求

】从Vuejs到DjangoREST框架的AxiosPOST请求【英文标题】：AxiosPOSTrequestfromVuejstoDjangorestframework【发布时间】：2019-11-2007:39:16【问题描述】：我用vuejs和djangorest框架创建了一个restapi。问题是当我提出发布请求时。通过获取请求，他可以... 查看详情

使用 axios 的 Vuejs 页面中的多个并发请求

】使用axios的Vuejs页面中的多个并发请求【英文标题】：MultipleconcurrentrequestsinaVuejspageusingaxios【发布时间】：2018-07-0117:00:34【问题描述】：我使用Vuejs创建了一个小组件，它向传递的URL发出Ajax请求以确定其初始值。当我有几个该... 查看详情

CORS 块 Laravel + VueJS Axios

...请求时，我得到：“访问XMLHttpRequestat\'http://127.0.0.1:8080/来自\'http://localhost:8080\ 查看详情

使用 axios vuejs 和 laravel 验证表单

...的验证没有返回422状态的错误。Axios简单的axios向URL发布请求，如果我们在请求周期中发现错误，则希望得到响应。axios.post(this.formURL, 查看详情

vue3在axios中添加数据来自于sessionstorage的请求头（请求头添加token）(代码片段)

main.jsconstapp=createApp(App)app.config.globalProperties.$http=axios;//接口请求的基准路径axios.defaults.baseURL='http://192.168.1.111:8083/';//添加请求拦截器axios.interceptors.request.use(config& 查看详情

vue3在axios中添加数据来自于sessionstorage的请求头（请求头添加token）(代码片段)

main.jsconstapp=createApp(App)app.config.globalProperties.$http=axios;//接口请求的基准路径axios.defaults.baseURL='http://192.168.1.111:8083/';//添加请求拦截器axios.interceptors.request.use(config& 查看详情

Vue 未使用来自 Axios 请求的数据更新数组中的 Vuetify 数据表

】Vue未使用来自Axios请求的数据更新数组中的Vuetify数据表【英文标题】：VuenotupdatingVuetifydata-tablefromarraywithdatafromAxiosrequest【发布时间】：2020-04-2003:28:02【问题描述】：我有一个问题，一直在寻找几个小时来解决它，但没有任何... 查看详情

如何修复来自 Axios 的随机 http 请求（404 响应）

】如何修复来自Axios的随机http请求（404响应）【英文标题】：Howtofixrandomhttprequest(404response)fromAxios【发布时间】：2019-09-2704:44:23【问题描述】：HTTP请求按预期工作，但我看到对/%3Canonymous%3E的附加请求返回404。这导致Redux中出现以... 查看详情

Vuejs 在 vuex 商店中使用 axios 请求：不能发出多个请求，为啥？

】Vuejs在vuex商店中使用axios请求：不能发出多个请求，为啥？【英文标题】：Vuejswithaxiosrequestinvuexstore:can\'tmakemorethanonerequest,why?Vuejs在vuex商店中使用axios请求：不能发出多个请求，为什么？【发布时间】：2018-01-1412:50:13【问题描... 查看详情