iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何实现跨页面传递与接收数组并赋值
  • 279
分享到

vue如何实现跨页面传递与接收数组并赋值

2024-04-02 19:04:59 279人浏览 泡泡鱼
摘要

目录跨页面传递与接收数组并赋值1.界面A:question-edit2.界面B:add-question数组赋值踩过的坑跨页面传递与接收数组并赋值 为更好让大家理解拿自己的项目做例

跨页面传递与接收数组并赋值

为更好让大家理解拿自己的项目做例子并附上动图效果,可以看到将第一行数据选中的一行赋值到了另一个界面:为了更好让大家理解拿去附用将我每个界面和方法属性的命名都介绍给大家:

兄弟界面跳转:question-edit——>add-question

1.界面A:question-edit

想要将本行的数据赋值过去,因为不是一个所以要用到数组,将它们打包好,首先第一步我们的入口在操作的编辑图标上

1.编辑图标代码:

<template slot-scope="scope">
	<el-button @click="addQuestion(scope.row)" type="text" size="small" icon="el-icon-edit"></el-button>
</template>

点击事件中的addQuestion是自己定义的界面跳转方法。确定本行携带数据加入模板插槽后,在跳转方法中加入(scope.row)

2.方法addQuestion

	addQuestion(row) {
	      this.carryCurrentRowCode = row;
	      this.$router.push({
	        path: "add-question",
	        //query: this.carryCurrentRowCode
	        query: {
	          carryCurrentRowCode: this.carryCurrentRowCode
	        }
	      });
    },

跳转功能的实现主要是path: "add-question"起到的作用。

界面跳转详情可以了解详细文章:https://www.jb51.net/article/245670.htm

注意:注释的一行不能实现,用下方带括号的。

下方carryCurrentRowCode: this.carryCurrentRowCode

前边的是接收界面用到的接收数组,我这里把他们名字命名一样了,实际前后可以不同。

3.carryCurrentRowCod是定义的数组

	export default {
	  data() {
	    return {
		//点击编辑 携带当前行的参数数组
		      carryCurrentRowCode: {
		        questionTypeId: "",
		        serial: "",
		        questionClassifyId: "",
		        questionContent: "",
		        degreeInitial: ""
		      },
}

数组中括号的是带的组件的数据。括号里加自己想携带的数据。

2.界面B:add-question

1.拿过传递过来的数组

	export default {
	  data() {
	    return {
		// 传递过的数组
		      carryCurrentRowCode: {}
    };

2.因为拿过来的数组是在界面一加载就显示出来的,所以传递过来的数组方法和将值赋值到对应的组件中都要卸载钩子函数中

	created() {
	    // 从question-edit界面接收到carryCurrentRowCode数组
	    this.carryCurrentRowCode = this.$route.query.carryCurrentRowCode;
    }

3.传递过来的数组是拿到了,具体将一个值赋值到组件中举一个例子:用试题编号举例serial: "",

		// 试题编号
    this.i_number = this.carryCurrentRowCode.serial;

同样将赋值写到钩子函数中。

解释i_number

是组件el-input试题编号v-model="i_number"

注意:

如果不是兄弟接收界面的命名命名好了,可以减少这个组件赋值步骤,直接在组件的v-model中等于接收数组点serial

数组赋值踩过的坑

最近需要在Vue当中完成动态赋值数组操作,从服务器拿到数据后,刷新数组中的数据,但是发现无论使用什么方法都不行,通过打log,发现数据在这里就无法向下执行,而且也没有报任何的异常,最终问题解决,在这里做个记录。

Vue中的数组赋值和在普通的JS中赋值还是有所区别。

以下操作可以引起界面刷新:pushpop unshiftshiftreversesortsplice

以下操作不会引起界面刷新:sliceconcat filter

还有一点需要注意:

如果通过直接赋值或者改变长度是无法让界面刷新的。

(1)通过索引直接设置项。

(2)修改数组长度,mylist.length=3

第二点,在从服务器中获取数据后赋值需要注意一个问题:主体对象的改变。

比如在使用axios对象发起请求后,在返回方法中处理数据需要注意:

注意在axiOS的then方法中调用对象时,不能使用this对象,因为此时this对象指的是axios实例,所以通过this是获取不到vue实例中的data数据的,必须在外界使用一个值来指向vue实例对象,通过这个外部对象来赋值,才是正确的。

var self;
created:function(){
self = this;
},
mouted:function(){        
axios.create({
        baseURL: 'url',
        timeout: 10000,
        headers: { 'Content-Type': 'application/JSON' }
      }).get('xxxxxxxxxx')
          .then(function(response){
            if(response.data.dataList.length>0){
              var datalist = response.data.dataList;
              for(var i=0;i<datalist.length;i++){
                self.DeviceTypeList.push({devicetype:datalist[i].name});
              }
            }
        })
          .catch(function(error){
            console.log(jsON.stringify(error));
          });
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue如何实现跨页面传递与接收数组并赋值

本文链接: https://www.lsjlt.com/news/147044.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何实现跨页面传递与接收数组并赋值
    目录跨页面传递与接收数组并赋值1.界面A:question-edit2.界面B:add-question数组赋值踩过的坑跨页面传递与接收数组并赋值 为更好让大家理解拿自己的项目做例...
    99+
    2024-04-02
  • vue怎么实现跨页面传递与接收数组并赋值
    今天小编给大家分享一下vue怎么实现跨页面传递与接收数组并赋值的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。跨页面传递与接收...
    99+
    2023-06-30
  • AngularJS如何实现跨页面传值
    这篇文章主要介绍了AngularJS如何实现跨页面传值,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。用的ionic这里使用ui-router...
    99+
    2024-04-02
  • 小程序如何跨页面传递对象数组
    小程序跨页面传递对象数组的示例:传递页面,代码:click: function(e) {var model = JSON.stringify(e.currentTarget.dataset.model);//将数组或者对象转换成字符串,传递...
    99+
    2024-04-02
  • vue跳转页面并且实现参数传递接受示例
    目录vue跳转页面及参数的传递接受一、页面跳转、传递参数二、接收参数vue跳转页面及参数的传递接受 要实现一个功能:从页面A跳转到页面B,并且页面A的参数要传递到页面B,B使用传过来...
    99+
    2024-04-02
  • jquery如何实现页面跳转并传值
    本文小编为大家详细介绍“jquery如何实现页面跳转并传值”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何实现页面跳转并传值”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、jQuery页面跳转在...
    99+
    2023-07-05
  • Angular中如何实现$state.go页面跳转并传递参数
    这篇文章给大家分享的是有关Angular中如何实现$state.go页面跳转并传递参数的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。路由页面(注意这里要在路由上添加一个参数用于传...
    99+
    2024-04-02
  • vue组件中如何实现数据传递
    这篇文章给大家分享的是有关vue组件中如何实现数据传递的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体如下:1、props:父组件 -->传值到子组件app.vue是父组...
    99+
    2024-04-02
  • vue跳转同一个组件页面接收值只接收一次如何解决
    本文小编为大家详细介绍“vue跳转同一个组件页面接收值只接收一次如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue跳转同一个组件页面接收值只接收一次如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧...
    99+
    2023-07-04
  • 如何用vue实现组件间参数传递
    这篇文章主要介绍“如何用vue实现组件间参数传递”,在日常操作中,相信很多人在如何用vue实现组件间参数传递问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何用vue实现组件间参数传递”的疑惑有所帮助!接下来...
    99+
    2023-07-04
  • vue如何实现兄弟组件的数据传递
    本篇内容介绍了“vue如何实现兄弟组件的数据传递”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在main.js里面设置data{eventH...
    99+
    2023-07-04
  • vue $set如何实现给数组集合对象赋值
    本篇内容主要讲解“vue $set如何实现给数组集合对象赋值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue $set如何实现给数组集合对象赋值”吧!vue $set 数组集合对象赋值在vu...
    99+
    2023-06-20
  • ASP中如何使用数组传递给接口并实现数据交互?
    在ASP开发中,我们经常需要将数据传递给后端接口进行处理。而在某些场景下,我们需要传递的数据不是单个变量,而是一个数组。那么,在ASP中如何使用数组传递给接口并实现数据交互呢?本文将为大家详细介绍。 一、ASP中数组的基本概念 在ASP中...
    99+
    2023-07-31
    数组 打包 接口
  • 实现PHP页面跳转时如何传递POST数据
    实现PHP页面跳转时如何传递POST数据 在开发PHP应用程序时,有时候我们需要在页面跳转时传递POST数据,这可能涉及到一些敏感信息或者需要在跳转后进行处理的数据。在这种情况下,我们...
    99+
    2024-04-02
  • 微信小程序中页面间如何实现传值与页面取值操作
    小编给大家分享一下微信小程序中页面间如何实现传值与页面取值操作,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体如下:微信小程序...
    99+
    2024-04-02
  • 如何解决vue跳转同一个组件,参数不同,页面接收值只接收一次的问题
    这篇文章主要介绍如何解决vue跳转同一个组件,参数不同,页面接收值只接收一次的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!作为vue的初用者,你可能会像我一样遇到一个问题,对跳...
    99+
    2024-04-02
  • Vue如何实现页面状态保持页面间数据传输
    这篇文章主要为大家展示了“Vue如何实现页面状态保持页面间数据传输”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue如何实现页面状态保持页面间数据传输”这篇文...
    99+
    2024-04-02
  • VUE如何实现选择上传图片并页面显示功能
    这篇文章给大家分享的是有关VUE如何实现选择上传图片并页面显示功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下dem...
    99+
    2024-04-02
  • vue中的get方法\post方法如何实现传递数组参数
    目录get方法\post方法如何传递数组参数第一部分:vue中get方法如何传递数组参数 下面列出我的接口格式及解决方法的源码vue get与post传参方式1.post:...
    99+
    2024-04-02
  • 微信小程序中如何实现页面跳转和数据传递
    这篇文章主要介绍了微信小程序中如何实现页面跳转和数据传递,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序 页面跳转和数据传递1.先导...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作