Django-Vue get_absolute url error on template

Я пытаюсь перенаправить главную страницу моего Vue на страницу подробного описания конкретного продукта с его url при нажатии на кнопку.

Хотя мои серверы django и vue работают нормально. Я получаю эту ошибку в chrome.

Ошибка хрома:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'get_absolute_url')
    at Proxy.render (HomeView.vue?43d0:14:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:893:1)
...

Ошибка проявляется только тогда, когда я добавляю тег router link с методом product.get_absolute_url. Когда я его убираю, элементы продукта (latestProducts) отображаются нормально.

HomeView.vue

<template>
  <div class="home">
    <div class="product-container">
      <div
        class="product-item"
        v-for="product in latestProducts"
        :key="product.id"
      >
        <img class="prod-img" :src="product.get_image" alt="" />
        <h2>{{ product.name }}</h2>
        <p>{{ product.price }}</p>
      </div>
      <div>
        <router-link v-bind:to="product.get_absolute_url"
          ><button>View Item</button></router-link
        >
      </div>
    </div>
    <router-view />
  </div>
</template>

Вот мой файл models.py, в котором определена модель get_absolute_url.

class Product(models.Model):
    category = models.ForeignKey(Category, related_name='products', on_delete=models.CASCADE)
    name = models.CharField(max_length=255)
    slug = models.SlugField()
    description = models.TextField(blank=True, null=True)
    price = models.DecimalField(max_digits=6, decimal_places=2)
    image = models.ImageField(upload_to='uploads/', blank=True, null=True)
    thumbnail = models.ImageField(upload_to='uploads/', blank=True, null=True)
    date_added = models.DateTimeField(auto_now_add=True)

    class Meta:
        ordering = ('name',)

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return f'/{self.category.slug} / {self.slug }/'

Я прочитал документацию django, в которой предлагается использовать функцию reverse() и имя представления в views.py для маршрутизации к url. Но я не думаю, что это сработает, потому что я использую APIView из rest_framework.

Вот мой файл views.py:

class ProductDetail(APIView):
    def get_object(self, category_slug, product_slug):
        try:
            return Product.objects.filter(category_slug=category_slug).get(slug=product_slug)
        except Product.DoesNotExist:
            raise Http404

    def get(self, request, category_slug, product_slug, format=None):
        product = self.get_object(category_slug, product_slug)
        serializer = ProductSerializer(product)
        return Response(serializer.data)

Я хотел бы знать, как устранить эту ошибку и/или ресурсы, которые помогут лучше понять концепцию url и маршрутизации.

Вернуться на верх