vue通过异步获取数据然后渲染一个集合点击集合的任何一个带参传值到其他页面

最新推荐文章于 2024-04-29 16:06:18 发布
最新推荐文章于 2024-04-29 16:06:18 发布
阅读量252 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45153375/article/details/130185704
版权

简介

我们可以使用v-on的事件绑定对应的click事件，然后我们调用对应的函数里面的参数可以直接使用v-for去循环遍历所有的值然后直接往v-on:click里面进行存值，然后就可以通过点击将值传到对应的里面然后执行对应函数的跳转然后进行url传参然后当时的页面就可以直接获取URL的参数进行响应

代码

这里直接给核心代码

//页面元素设置对应的参数
v-on:click="toParcelInformation(p.pid)">

//这里用uniapp演示函数，这里就可以直接获取上面的东西然后进行跳转
toParcelInformation(e) {
	uni.navigateTo({
		url: '../../pages/page/parcel?id='+e
	})
}

扩展

想要获取对应的URL的参数可以参考这里的文章

点击直达

堕落年代
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue异步数据 报错_vue异步axios获取的数据渲染到页面的方法
weixin_39658726的博客
12-21 572
我们在vue，数据很多事异步获取来的，如果在template直接使用，会报错，undefined。因为先渲染后得到的数据，那如何才能不报错呢？computed!!!举个例子index.vue忽略坑人的传参方式。。。created(){this.init()this.axios.post('/wanwei/appserver/eqinfo/eqbaseinfo?reqjson={"eq_code":...
Vue3解决Vuex异步获取数据，页面先渲染问题
weixin_67560997的博客
03-05 4990
Vue3解决Vuex异步获取数据，页面先渲染问题
(汇总)vue中在不同页面之间-4种传递参数的方式
最新发布
Keep trying, keep going
04-29 385
发挥两者的优点：全局、刷新不丢。
vue异步数据 报错_浅谈vue异步数据影响页面渲染
weixin_39866741的博客
02-05 607
今天遇到一个问题，要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中，而在页面渲染时session中还没有user，页面直接报错。因此我希望能在所有请求都得到后再去做页面的渲染。1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏，避免渲染2.写计数器，每1ms进行一次查询，如果session中已经有user，删...
vue ajax渲染数据,Vue2 异步获取的数据(通过ajax)获取的数据 渲染到dom上
weixin_36206388的博客
08-05 1022
页面dom结构如下姓名： {{msg.name}}年龄： {{msg.old}}地址： {{msg.address}}id： {{msg.user_id}}删除jsvar app = new Vue({el:'#app',data:{msg:{name:'zhangsan',old:'18',address:'shanghai',user_id:'101010',}},//可以将渲染数据的操作放...
接口异步获取数据，渲染子组件踩坑
weixin_45635130的博客
05-17 365
接口异步获取数据，渲染子组件，会出现子数组不刷新的现象。原因是： 本来是在子的created获取props的值然后放在data里再渲染 但是由于生命周期的原因 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子up
vue异步axios获取的数据渲染到页面的方法
10-18
今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈vue异步数据影响页面渲染
10-16
今天小编就为大家分享一篇浅谈vue异步数据影响页面渲染，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue父组件异步获取数据传给子组件的方法
10-18
在Vue框架中，父组件与子组件之间的数据传递是一个常见的需求。当父组件的数据是通过异步请求获取时，如何正确地将这些数据传递给子组件，并确保子组件能够及时、安全地使用这些数据，是开发者需要面对的问题。本文...
Vue利用History记录上一页面的数据方法实例
10-17
在Vue.js应用中，利用HTML5的History API可以有效地实现页面间数据的记录与回溯，尤其是在使用Vue Router的history模式下。以下是对这个话题的详细讲解。 **Vue Router的History模式** Vue Router的history模式是...
vue数据调取怎么渲染列表_vue获取后台数据列表并在页面遍历显示
weixin_39611208的博客
12-20 5431
1.在home.js中设置urlvar home = {searchByVender:'/index/search', //首页搜索-商家和商品列表}2.引入home.jsimport home from "@/common/api/home"3.在data中定义关键字和搜索返回的商品列表data() {return {keyword: '', //搜索关键字searchShops: [], /...
vue3父组件异步获取后端数据，子组件无法及时渲染问题分析、解决及使用suspense组件进行骨架屏优化
reason125132的博客
05-04 8712
vue3中一个常见场景，父组件向后端异步获取数据，再父子传参给子组件，由子组件来渲染获取到的数据。
vue封装自定义组件，异步加载数据，渲染组件，子组件没接收到
weixin_47390278的博客
03-26 351
父组件传递对象形式接收不到，刷新也没用，但是你到编辑器里重新保存编译后，数据就回显来了
Vue3异步请到后台数据时在渲染时页面不显示或者页面没有数据的问题
k490031的博客
03-28 4663
reactive()应该是响应式实时更新数据的但是打印有数据但是页面没有渲染，只有用push()方法添加到数据中。页面数据打印是有的证明接口已经获取了数据。现在页面已经渲染数据。
关于vue3异步=＞同步,请求接口数据再echarts图表渲染
m0_69097184的博客
07-10 6201
当遇到`await`关键字时，它会暂停当前异步函数的执行，等待后面的异步操作完成，并返回其结果。在使用`await`等待异步操作时，它会将控制权交给其他代码，直到异步操作完成才会继续执行。1. async关键字：用于定义一个函数或方法为异步函数。异步函数在执行过程中可以暂停，让出执行权给其他代码，然后在某个条件满足后再继续执行。异步函数使用`async`关键字来修饰函数定义。问题原因：因为异步的请求，所以还未全部请求完数据，页面加载就已经渲染了，导致未拿到数据。
Vue进阶（幺捌陆）：异步请求导致页面数据渲染错误问题解决
IT全栈 华强工作室
04-22 4225
场景描述 在Vue项目优化过程中，页面部分应用JS调用promise返回的异步数据，导致页面部分始终无法加载后台返回的数据值。通过触发其他DOM操作（例如折叠栏位的操作），后台数据可以正常渲染展示。处理逻辑大致如下： <template> <div v-for="(items, index) in results" :key="items.itemsID"> <span v-for="(item, index) in items.appendItems" :key="it
vue项目中使用ztree树形插件，ztree请求后台数据渲染Dom
热门推荐
奔跑的搬运工
03-22 1万+
使用npm install jquery –save 在项目中安装ztree依赖文件 jquery; 在index.html里面引用ztree样式文件zTreeStyle.css（前面的图标可以自定义可以参考官网） 3.在项目中引入ztree文件，在main.js中引入 网上给的资料是在这里同时引入jquery；但是项目中引入 报错 impor...
Vue拿到后端返回的List，渲染出element-tree树结构
qq_36913208的博客
01-02 5569
前言： 这是我的做法，基本上是照葫芦画瓢，我也不知道有没有更好的方法能拿到 tree组件的实例 element-tree 增加节点的方法 如果在模板中定于了 <el-tree>的数据源如下： <el-tree :data="nodeData"></el> 那么在当前Vue组件实例中定义并初始化数据源 export default { name: '...
vue组件异步获取数据怎么渲染到页面
05-18
在 Vue 组件中异步获取数据后，可以将数据存储在组件的 data 属性中，然后通过模板语法或计算属性将数据渲染到页面上。 例如，在组件的 created 钩子函数中使用异步请求获取数据： ``` created() { axios.get('/api/data').then(res => { this.dataList = res.data; }).catch(err => { console.error(err); }); } ``` 这里将获取到的数据存储在了组件的 dataList 属性中。然后可以在模板中通过 v-for 指令将数据渲染到页面上： ``` <template> <div> <ul> <li v-for="item in dataList" :key="item.id">{{ item.name }}</li> </ul> </div> </template> ``` 也可以通过计算属性对数据进行处理后再渲染到页面上： ``` <template> <div> <ul> <li v-for="item in processedData" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { dataList: [] }; }, created() { axios.get('/api/data').then(res => { this.dataList = res.data; }).catch(err => { console.error(err); }); }, computed: { processedData() { // 对数据进行处理 return this.dataList.map(item => { return { id: item.id, name: item.name.toUpperCase() }; }); } } }; </script> ``` 在这个例子中，使用了一个计算属性 processedData 对 dataList 进行了处理，然后将处理后的数据渲染到页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

堕落年代

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值