Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/449.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用Vue引导表中的另一列数据路径的Vue路由器链接_Javascript_Vue.js_Vue Router - Fatal编程技术网

Javascript 使用Vue引导表中的另一列数据路径的Vue路由器链接

Javascript 使用Vue引导表中的另一列数据路径的Vue路由器链接,javascript,vue.js,vue-router,Javascript,Vue.js,Vue Router,我在vue引导中有一个包含用户数据的表。我正在使用Vue路由器进入用户配置文件页面。配置文件页面路径是/user/idNumber,我想在Name下发送它。大概是这样的: 我怎么能做到 代码: {{data.value}} {{data.value}} 用户列表: [{"_id":"5df9663acf06e2001742ac17","name":"Retdadada5155465","lastname":"Nienow","email":"Laverne55@yahoo.com","a

我在vue引导中有一个包含用户数据的表。我正在使用Vue路由器进入用户配置文件页面。配置文件页面路径是
/user/idNumber
,我想在Name下发送它。大概是这样的:


我怎么能做到

代码:


{{data.value}}
{{data.value}}
用户列表:

[{"_id":"5df9663acf06e2001742ac17","name":"Retdadada5155465","lastname":"Nienow","email":"Laverne55@yahoo.com","age":"1995","gender":"female","weight":58,"height":166,"activity":1.4,"value":3,"_createdOn":"2019-12-17T23:35:22.339Z","_updatedOn":"2019-12-19T20:57:30.588Z"},{"_id":"5df842f2cf06e2001742a8ec","name":"Retdadada516","lastname":"Nienow","email":"Laverne55@yahoo.com","age":"1993","gender":"female","weight":58,"height":166,"activity":1.4,"value":3,"_createdOn":"2019-12-17T02:52:34.183Z","_updatedOn":"2019-12-19T20:57:42.352Z"},{"_id":"5df7c972bca42200177decb4","name":"Lue","lastname":"Schneider","email":"Rosella93@yahoo.com","age":"1997","gender":"female","weight":60,"height":180,"activity":1.6,"_createdOn":"2019-12-16T18:14:10.554Z","_updatedOn":"2019-12-19T20:57:51.550Z"}]'
字段:

["_id",
                {
                    key: "fullname",
                    label: "Fullname",
                    sortable: true,
                    formatter: (value, key, item) => {
                        return item.name + " " + item.lastname
                    },
                },
                {
                    key: "birthYear",
                    label: "Age: ",
                    sortable: true,
                    formatter: (value, key, item) => {
                        return new Date().getFullYear() - item.age
                    },
                },
            ],

考虑到

对具有全名的第二个模板进行一点更改即可完成此任务。第一个应该是好的,因为我已经看到了

您只需使用
data.item
即可利用循环项中的任何数据

<template>
  <b-table striped hover :items="usersList" :fields="fields">
    <template v-slot:cell(_id)="data">
      <router-link :to="`/user/${data.value}`">{{ data.value }}</router-link>
    </template>
    <template v-slot:cell(fullname)="data">
      <router-link :to="`/user/${data.item._id}`">{{ data.value }}</router-link>
    </template>
  </b-table>
</template>

{{data.value}}
{{data.value}}

工作沙盒:

如果您查看这里的文档:您会看到,当使用范围字段槽时,
数据对象有几个属性。其中一个是
item
,它表示该行的项目作为一个整体。因此,您可以这样做:


{{data.value}}

其中,
someProperty
是您要放置在路由路径中的用户对象的属性。

您的
userList
字段
是什么样子的?我只添加了这几行。因此您应该能够单击名称,然后它应该会重定向您,对吗?是的。重定向到“users/userID”而不是/name。谢谢!现在一切正常了,我之前只尝试了“:to=“
/user/${item.\u id}
”…真是太遗憾了。