CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentnuxt.js
Mads Hjorth
Mads Hjorth

Reputation: 447

@click as link returns undefined

I am trying to make a row in a datatable clickable as a link. Using regular <nuxt-link> within a <td> works, and wrapping the entire <tr> messes the table design.

I then tried using @click with a method, which returns a 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
    }
  }

What do you suggest me to do, in order to make the entire row working as a link?

Upvotes: 1

Views: 55

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

As @Skirtle said, you should pass the productCard as parameter and use it inside the method :

@click="goToProduct(productCard)"

but i don't recommend to use location.href to navigate to the given url, try to use what Nuxt.js offers which is the $router instance like :

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

Upvotes: 1

skirtle
skirtle

Reputation: 29122

You would need to pass the productCard to the method:

@click="goToProduct(productCard)"

then:

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

That said you may be better off interacting with the router rather than setting the href directly.

Upvotes: 2

Related Questions