https://i.stack.imgur.com/wK9uU.png
I'm working with a Vuetify table that has a column for URLs. I need to implement logic to display either the URL or the URL Group name based on properties in my rules array. If rules[i].urlGroup is not empty, then I know
Here's what I have tried so far:
<template v-slot:item.url="{ index, item }">
{{ displayURLInfo(index) }}
</template>
displayURLInfo(index) {
if (this.rules[index].urlGroup != '') {
// console.log('this.rules[index].urlGroup', this.rules[index].urlGroup) // here printed perfectly on console.
return this.rules[index].urlGroup
} else {
return this.url
}
}
Although the data was logged correctly inside the first if condition, it failed to render on the UI.
This is the structure of my rules array, consisting of only 5 properties:
https://i.stack.imgur.com/Ce6wc.png