记一次vue2路由参数传递this指针问题
需要船体一个data()内的对象到另一个页面。
<player-card v-for="(note, key) in sortedtNodes"
:imgurl="note.avarUrl"
:playerId="note.playerId"
:title="note.playerName"
:label="note.kIndex"
@click.native="$router.push({name: 'player_topics', params: { playerId: note.playerId, playerName: note.playerName, dateFroHome: this.date }})"></player-card>
在跳转到的页面却并没有获取到,手动打印一下是这样的结果:
尝试将参数设置为固定值:dateFroHome: '2017-04-28'这样后端是可以获取到的。所以这里确定是this指针问题。
所以这里的dateFroHome: this.date 的this是player-card组件里的this吧。
问题找出来了,怎么解决呢?
看了下官方文档《组件数据流》中的内容:
简单来说vue是不允许将父组件中的对象引用直接传递给子组件的,为了应对这种情况,vue提供了两种方法:
1.定义一个局部变量,并用 prop 的值初始化它:
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
2.定义一个计算属性,处理 prop 的值并返回。
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
可以看这样就能保证父组件的属性this.xxx都保留在父组件中给你了。
所以我修改了一下项目:
在父组件的computed中定义一个啥啥啥:
computed: {
thisDate: function () {
var this_date = this.date;
return this_date;
}
}
然后直接传递这个thisDate就可以了:
@click.native="$router.push({name: 'player_topics', params: { playerId: note.playerId, playerName: note.playerName, dateFroHome: thisDate }})"
记一次vue2路由参数传递this指针问题的更多相关文章
- 记一次服务器路由跟踪 (2019-01-23 TODO)
记一次服务器路由跟踪 有用户反馈网站 无法访问. 现象如下: ping 没有反馈,确认了可以 ping 通其它的网站. tracert 跟踪到服务器商的内部就没的反应了. 同样一家的服务器商,另外一台 ...
- Angular路由参数传递
一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...
- c指针作为参数传递以及指针的指针
指针作为函数参数传递 函数参数传递的只能是数值,所以当指针作为函数参数传递时,传递的是指针的值,而不是地址. #include "stdio.h" void pointer(int ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- vue2路由
我们在前面的学习过程中不管是在学习angular还是vue1,都会遇到二级路由,我们现在先来看一下vue2中的一级路由. 首先要引入的是vue2与路由文件. js代码: <script> ...
- golang 结合实例更好的理解参数传递和指针
关于参数传递 其实go的参数传递,核心就是一句话:go里所有参数传递都是值传递,既把参数复制一份放到函数里去用. go的函数传参,不管参数是什么类型,都会复制一份,然后新的参数在函数内部被使用. 不像 ...
- angular路由详解三(路由参数传递)
我们经常用路由传递参数,路由主要有三种方式: 第一种:在查询参数中传递数据 {path:"address/:id"} => address/1 => Activa ...
- 记一次AngularJs 路由 $stateChangeStart不起作用(细节决定成败)
var app= angular .module('app', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngSanitize', 'ngTouch', ' ...
- React-页面路由参数传递的两种方法
list页->detail页 方法一:路由参数 路由导航: 用“/” <Link to={'/detail/'+item.get('id')} key={index}> 路由map: ...
随机推荐
- 02 java 基础:java 文件名与类名关系 CLASSPATH
java 类修饰符:通常情况下使用 public 修饰,此时,java 强制要求 .java 文件名需与该 public 修饰类名一致,否则无法编译通过.如若没有加修饰符,文件名与类名可无任何关联. ...
- gulp配合vue压缩代码格式化
实际项目就是一个单页面.因此,我觉得用gulp足够,并且不需要webpack和vue-cli因为没有必要使用组件. 先来说一下项目结构 1. 然后来看看我的包管理package.json都用了啥,你也 ...
- bzoj 1040 基向内环树dp
#include<bits/stdc++.h> #define LL long long #define fi first #define se second #define mk mak ...
- 微软企业库5.0 学习之路——第六步、使用Validation模块进行服务器端数据验证
前端时间花了1个多星期的时间写了使用jQuery.Validate进行客户端验证,但是那仅仅是客户端的验证,在开发项目的过程中,客户端的信息永远是不可信的,所以我们还需要在服务器端进行服务器端的验证已 ...
- Nodejs Bot学习
关于示例部分可以参考<BotFramework Nodejs示例><BotBuilder Nodejs示例查看> Bot Framework Nodejs SDK包括几种与用户 ...
- Exception异常处理机制
为什么要自定义自己的Exception ,Java Exception机制与传统的C语言的异常处理机制有什么不同,这种Exception机制的意义在什么地方?接下来咱就来和你一起探讨Exception ...
- 带有定位当前位置的百度地图web api 前端代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport& ...
- Structs2 校验框架
代码结构: 使用Struts校验框架,保证输入学生的基本信息:学号.姓名.性别.出生年月.专业.总学分等,要求输入满足以下条件:(1) 学号前两位大于“13”并且后面4位必须为数字:(2) 出生年月必 ...
- Linux命令之ftp
ftp [-pinegvd] [host] pftp [-inegvd] [host] 用户通过ftp这个程序来使用Internet上的标准文件传输协议(FTP).本程序允许用户向远端网站发送文件,或 ...
- Oracle 索引扫描的五种类型
之前在讨论CBO和RBO的时候提到了索引扫描的几种类型. Oracle Optimizer CBO RBO http://blog.csdn.net/tianlesoftware/archive/20 ...