@click 作为链接返回未定义

Posted 2023-02-23

【中文标题】@click 作为链接返回未定义

【英文标题】：@click as link returns undefined

【发布时间】：2020-07-31 00:56:23

【问题描述】：

我正在尝试将数据表中的一行作为链接单击。在<td> 中使用常规<nuxt-link> 可以工作，而将整个<tr> 包裹起来会使表格设计混乱。

然后我尝试将@click 与一个返回 404 的方法一起使用：TypeError: Cannot read property 'nuxtLink' of undefined

          <tbody class="bg-white">
            <tr
              v-for="(productCard) in productList"
              :key="productCard.acquisitionCost"
              :class="[
                'hover:bg-gray-50',
                'transition',
                'ease-in-out',
                'duration-150',
                'cursor-pointer'
              ]"
              @click="goToProduct()"
            >
              <td
                class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500"
              >
                 productCard.oVariant 
              </td>
              <td
                class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
              >
                <div class="text-sm leading-5 text-gray-900"> productCard.gear </div>
                <div class="text-sm leading-5 text-gray-500"> productCard.motor  hk</div>
              </td>
              <td
                class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
              >
                <div class="text-sm leading-5 text-gray-900"> productCard.fuelType </div>
                <div class="text-sm leading-5 text-gray-500"> productCard.economy  km/l</div>
              </td>
              <td
                class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
              >
                Tom
              </td>
              <td
                class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
              >
                Tom
              </td>
              <td
                class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-cool-gray-700"
              >
                DKK <b> productCard.monthlyPrice ,</b>- mdl.
              </td>
              <td
                class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
              >
                <nuxt-link
                  :to="productCard.nuxtLink"
                >
                  <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                  </svg>
                </nuxt-link>
              </td>
            </tr>
          </tbody>

  methods: 
    goToProduct: function () 
      location.href = this.productCard.nuxtLink
    
  

你建议我做什么，以使整行作为一个链接工作？

【参考方案1】：

正如@Skirtle 所说，您应该将productCard 作为参数传递并在方法中使用它：

@click="goToProduct(productCard)"

但我不建议使用 location.href 导航到给定的 url，尝试使用 Nuxt.js 提供的 $router 实例，例如：

this.$router.push(path: productCard.nuxtLink)

【参考方案2】：

您需要将productCard 传递给方法：

@click="goToProduct(productCard)"

然后：

goToProduct: function (productCard) 
  location.href = productCard.nuxtLink

也就是说你最好与路由器交互而不是直接设置href。