[英]Issue data-binding in conditional rendering (Vue.js)
Anyone have an idea what my issue may be here?有人知道我的问题可能在这里吗?
I have two buttons changing a data value ( categoryName
).我有两个按钮更改数据值( 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
然后我尝试使用条件渲染来渲染<template>
如果business.category
等于categoryName
I know that conditional formatting works if I manually type in a new value for categoryName.我知道如果我手动输入 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和 JSON
data: {
categoryFilter: "",
cardData: [
{
category: "expensive"
}
]
}
Issue resolved.问题解决了。
Instead of:代替:
v-if="business.category == '{{ categoryFilter }}'"
I removed the curly brackets and single quotes:我删除了大括号和单引号:
v-if="business.category == categoryFilter"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.