根据 vueJS 中的 url id 过滤表数据

Posted 2023-02-22

【中文标题】根据 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中，我不知道该怎么做。