Issue data-binding in conditional rendering (Vue.js)

Question

Anyone have an idea what my issue may be here?

I have two buttons changing a data value ( categoryName ). I know this is working as intended.

Then I'm trying to use conditional rendering to render the <template> if business.category is equal to categoryName

I know that conditional formatting works if I manually type in a new value for categoryName. But something isn't working with the buttons updating the value.

Here's the code

<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 }}'">

    <!-- HTML Content goes here -->

</template>

And the JSON

            data: {
                categoryFilter: "",
                cardData: [
                    {
                    category: "expensive"
                    }
                ]
            }

Answer 1

Issue resolved.

Instead of:

v-if="business.category == '{{ categoryFilter }}'"

I removed the curly brackets and single quotes:

v-if="business.category == categoryFilter"