在条件渲染中发出数据绑定 (Vue.js)

Question

有人知道我的问题可能在这里吗？

我有两个按钮更改数据值（ categoryName ）。 我知道这是按预期工作的。

然后我尝试使用条件渲染来渲染<template>如果business.category等于categoryName

我知道如果我手动输入 categoryName 的新值，条件格式会起作用。 但是有些东西不适用于更新值的按钮。

这是代码

<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>

和 JSON

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

Answer 1

问题解决了。

代替：

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

我删除了大括号和单引号：

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