I am in the process of creating a straightforward Vue application where the router links will be determined by the data retrieved from the server. The format of the data looks something like this:
id: 1
path: "category_image/About.jpg"
slug: "about"
subtitle: null
title: "About Us"
url: "http://archeoportal.loc/page/about"
My goal is to generate dynamic router-link elements that use window.location.href if the url field is not empty, otherwise I want it to function as just a regular router link. However, my current implementation is encountering errors such as
TypeError: Cannot read property 'redirect' of undefined<router-link
:to="this.redirect(category.url !== null ? category.url : category.slug, category.url !== null ? true : false)"
class="grid-item"
v-bind:key="category.id"
v-for="category in this.categories"
>
<div class="category-title py-4">
<h2>{{ category.title }}</h2>
<p>{{ category.description }}</p>
</div>
<img :src="`/storage/${category.path}`" />
</router-link>
As you can observe, I utilize a custom method for this purpose that resides in my methods and functions in the following manner:
methods:{
redirect(url, window){
if(window == true){
window.location.href = url;
}else{
this.router.push('url');
}
}
}
Unfortunately, my Vue application crashes and nothing gets displayed. Is there an alternate approach to achieve this functionality?