Vuejs - 使用 router.push() 时未定义的属性“id”

Posted 2023-02-23

【中文标题】Vuejs - 使用 router.push() 时未定义的属性“id”

【英文标题】：Vuejs - property 'id' of undefined when using router.push()

【发布时间】：2021-08-10 05:28:17

【问题描述】：

您好，我有一张表格，其中注册了我的所有信息，并且一个字段有一个按钮可以查阅每一行。我想要的是获取每一行的 id 并将其传递给 router.push 但这样做会得到我未定义的错误任何人都可以帮助我如何完成这项工作吗？

我使用 Ant Design Vue，这就是为什么我有 a- 元素，这是我的文件

<a-table :data-source="dataSource" :columns="columns" :loading="loading" rowKey="id">
// ive got more code here but this is the button code  :
<template #details>
    <span>
      <a-button
        @click="click(record)"
        class="btn btn-sm btn-light mr-2"
      >
        Details
      </a-button>
    </span>
  </template>
</a-table>
     <script>
      setup()      
 const router = useRouter()
    const click = (record) => 
      router.push( 
          name:'details' , params:id:[record.id],
        )
    
   

我怎样才能真正获得 id 以成功传递它并打开我的新页面？

【问题讨论】：

record 对象在哪里定义？

抱歉，对 Ant Design 不熟悉。是否进行了 Google 搜索，您是否尝试过在模板中添加插槽范围？所以<template #Details slot-scope="text, record">

谢谢你，我确实需要在我的模板中添加该记录，我实际使用的是<template #Details="record">，它确实有效。我有另一个与新页面相关的问题，但是如果他们遇到同样的问题，我会让这个来帮助其他人，所以你能检查一下这个吗？ ***.com/questions/67634101/…

【参考方案1】：

所以我错过了一个简单的细节，感谢 Matt U，我明白了： 我只需要以这种方式在我的模板中添加“记录”：

  <template #details="record"> <-- here's the add
    <span>
      <a-button
        @click="click(record)"
        class="btn btn-sm btn-light mr-2"
      >
        Details
      </a-button>
    </span>
  </template>