Does anyone have any insights on what might be causing my issue?
I am currently working with two buttons that are used to change a data value (categoryName). From my tests, I can confirm that this functionality is working correctly.
My next step involves implementing conditional rendering to display the <template> only if business.category matches the value of categoryName.
I have observed that the conditional formatting works when I manually enter a new value for categoryName. However, there seems to be an issue with the buttons updating the value.
Let's take a look at the code snippet:
<div>
<button v-on:click="categoryFilter = 'cheap'">cheap</button>
<button v-on:click="categoryFilter = 'expensive'">expensive</button>
</div>
<template v-for="business in cardData" v-if="business.category == '{{ categoryFilter }}'">
<!-- Insert HTML Content Here -->
</template>
Additionally, here is the JSON data structure being utilized:
data: {
categoryFilter: "",
cardData: [
{
category: "expensive"
}
]
}