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

Question

有人知道我的问题可能是什么吗？

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

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

我知道如果我手动为 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"