需要船体一个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指针问题的更多相关文章

  1. 记一次服务器路由跟踪 (2019-01-23 TODO)

    记一次服务器路由跟踪 有用户反馈网站 无法访问. 现象如下: ping 没有反馈,确认了可以 ping 通其它的网站. tracert 跟踪到服务器商的内部就没的反应了. 同样一家的服务器商,另外一台 ...

  2. Angular路由参数传递

    一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...

  3. c指针作为参数传递以及指针的指针

    指针作为函数参数传递 函数参数传递的只能是数值,所以当指针作为函数参数传递时,传递的是指针的值,而不是地址. #include "stdio.h" void pointer(int ...

  4. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  5. vue2路由

    我们在前面的学习过程中不管是在学习angular还是vue1,都会遇到二级路由,我们现在先来看一下vue2中的一级路由. 首先要引入的是vue2与路由文件. js代码: <script> ...

  6. golang 结合实例更好的理解参数传递和指针

    关于参数传递 其实go的参数传递,核心就是一句话:go里所有参数传递都是值传递,既把参数复制一份放到函数里去用. go的函数传参,不管参数是什么类型,都会复制一份,然后新的参数在函数内部被使用. 不像 ...

  7. angular路由详解三(路由参数传递)

    我们经常用路由传递参数,路由主要有三种方式: 第一种:在查询参数中传递数据 {path:"address/:id"}   => address/1  => Activa ...

  8. 记一次AngularJs 路由 $stateChangeStart不起作用(细节决定成败)

    var app= angular .module('app', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngSanitize', 'ngTouch', ' ...

  9. React-页面路由参数传递的两种方法

    list页->detail页 方法一:路由参数 路由导航: 用“/” <Link to={'/detail/'+item.get('id')} key={index}> 路由map: ...

随机推荐

  1. css3翻书效果

    强大的css3不需要解释,代码分层理解[直接复制],很有意思. 效果图: <ul class="align"> <li> <figure class= ...

  2. Java String lastIndexOf() 方法

    Java String lastIndexOf() 方法 测试代码 public class Test { public static void main(String[] args) { // -- ...

  3. hdu 4135 Co-prime (素数打表+容斥原理)

    题目链接 题意:问从A到B中与N互素的个数. 题解: 利用容斥原理:先求出与n互为素数的个数. 可以先将 n 进行素因子分解,然后用区间 x 除以 素因子,就得到了与 n 的 约数是那个素因子的个数, ...

  4. 【ASP.NET MVC】提高页面加载速度:脚本优化

    在这里我们说一下脚本优化的三个方法: 一.在我们做Web开发的时候,当我们引用Js文件的时候,我们一般会将js文件放在文档的head标签中,这时当页面加载的时候,浏览器会按着由上到下的顺序,当浏览器遇 ...

  5. gvim代码补全

    gvim 代码自动提示 插件 插件名:AutoComplPop 下载地址:http://www.vim.org/scripts/script.php?script_id=1879 gvim 代码模板补 ...

  6. 差分【bzoj3043】IncDec Sequence

    Description 给定一个长度为n的数列{a1,a2...an},每次可以选择一个区间[l,r],使这个区间内的数都加一或者都减一. 问至少需要多少次操作才能使数列中的所有数都一样,并求出在保证 ...

  7. [BZOJ 4537][Hnoi 2016]最小公倍数

    传送门 并查集+分块 看到题目可以想到暴力做法, 对于每个询问, 将所有a和b小于等于询问值的的边加入图中(用并查集), 如果询问的u和v在一个联通块中, 且该联通块的maxa和maxb均等与询问的a ...

  8. 【无源汇有上下界可行流】ACdream1211-Reactor Cooling

    [题意] 给出一些边流量的上界和下界,问能否循环流通. [思路] 黄学长讲得很清楚,直接贴过来: 上界用ci表示,下界用bi表示. 下界是必须流满的,那么对于每一条边,去掉下界后,其自由流为ci– b ...

  9. Java学习笔记(11)

    自定义异常类: 自定义异常类的步骤:自定义一个类继承Exception即可 public class CustomClass { public static void main(String[] ar ...

  10. Problem E: 12306

    #include <stdio.h> struct student{ int n; int m;}; int main(void) { int T; int k,g,i,j; ],max; ...