@click 作为链接返回未定义答案

【问题标题】：@click as link returns undefined@click 作为链接返回未定义
【发布时间】：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
    }
  }

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component nuxt.js

【解决方案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。

【讨论】：