根据 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 过滤表数据的主要内容,如果未能解决你的问题,请参考以下文章

根据另一个表中的自定义属性过滤值

根据其他ID参数过滤Fullcalendar事件

获取数组对象vuejs中的数据id

连接两个表而不根据连接条件过滤数据

如何在 VueJS 中更新表的数据?

如何让 vuejs 过滤器为数组内的嵌套项工作?