根据 vueJS 中的 url id 过滤表数据
Posted
技术标签:
【中文标题】根据 vueJS 中的 url id 过滤表数据【英文标题】:Filter table data depending of a url id in vueJS 【发布时间】:2018-04-29 17:13:15 【问题描述】:我想根据 url 页面中的 id 从 JSON API 获取数据。 首先,我的表的代码具有链接,具体取决于转到第二个表模板的 url id:
<table class="table table-condensed">
<tr style="text-align:left;" v-for="data in metadata">
<td>data.id</td>
<td><router-link :to=" name: 'mixtapesDetails', paramsid : data.id">
data.title
</router-link></td>
<td><router-link :to=" name: 'mixtapesDetails', paramsid : data.id">
data.artist
</router-link></td>
</tr>
</table>
还有我的第二个表,我只想根据 ID 显示我的数据:
<div style="margin-left:400px;">
<div>$route.params.id</div>
<table class="table table-condensed">
<tr>
<th>ID</th>
</tr>
<tr style="text-align:left;" v-for="data in metadata">
<td>data.id</td>
<td>data.title</td>
<td>data.artist</td>
<td>data.cover</td>
</tr>
</table>
</div>
然后我有我的 Js 函数来获取我的所有数据:
export default
data()
return
metadata: null
,
methods:
httpGet(theUrl)
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false); // true for asynchronous request
xmlHttp.send(null);
console.log(JSON.parse(xmlHttp.responseText));
return JSON.parse(xmlHttp.responseText);
,
mounted()
this.metadata = this.httpGet("urltooJsondata");
然后我在 JS 中有我的路线:
export default new VueRouter(
routes: [
path: '/mixtapeList',
name: 'mixtapeList',
component: mixtapeList
,
path: '/mixtapesDetails/:id',
name: 'mixtapesDetails',
component: mixtapesDetails
]
)
目标是,当我单击路由器链接时,它会转到具有类似 /mixtapesdetails/id 的 url 的单个页面,并且我希望该页面上显示的数据是与 url 对应的数据身份证。
我真的需要帮助,但我在网上找不到解决方案。
【问题讨论】:
【参考方案1】:我认为为此目的存在$route.params
对象。所以如果你有这样的路线,
path: '/mixtapesDetails/:anything',
name: 'mixtapesDetails',
component: mixtapesDetails
在mixtapesDetails
组件实现中,您可以使用$route.params.anything
访问:anything
路径段值。
【讨论】:
是的,我编辑了那个,我忘了把我的第二个表放在我想显示我的数据的地方。问题是我不知道如何根据我的 ID 获取表的其他值。 但是这些额外的数据与路由无关……你用的是Vuex吗? 我在 WebPack 环境中使用 VueJS。也许我添加路由部分会使问题更复杂,但我认为这部分对于理解问题是必要的。 看来你的架构很糟糕。您是否尝试将通过 ajax 调用获得的 JSON 存储在路由元数据中? 我在元数据变量中获取了我的 Json 数据,然后我将它们显示在一个 html 表中,这有助于 for 循环。这部分没关系,它对应于我的第一个表。第二个表在这里只获取我的JSON API对应一个ID的数据,这个在url中,我不知道该怎么做。以上是关于根据 vueJS 中的 url id 过滤表数据的主要内容,如果未能解决你的问题,请参考以下文章