javascript - 在条件渲染中发出数据绑定 (Vue.js)
问题描述
有人知道我的问题可能在这里吗?
我有两个按钮更改数据值(categoryName
)。我知道这是按预期工作的。
然后我尝试使用条件渲染来渲染<template>
ifbusiness.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"
}
]
}
解决方案
问题解决了。
代替:
v-if="business.category == '{{ categoryFilter }}'"
我删除了大括号和单引号:
v-if="business.category == categoryFilter"
推荐阅读
- html - 引导卡制作响应式
- cuba-platform - 在 CUBA studio 中编辑数据模型中的 java 代码
- vue.js - Ag-grid-vue3 vs Quasar v2 vue 3 不能正常工作
- java - 任务 ':app:mergeDebugResources' 执行失败。错误
- android - 结合 android 客户端、spring-boot 后端和 Oauth2 社交登录的最佳实践
- mongodb - Jave webflux 处理带有 id 的字符串响应
- reactjs - reactJs begineer > 写了一个简单的代码但是没有输出
- r - Simulate a dataset for replication
- c++ - how to use binary search on string
- sql - 雪花 - 用“关键变化”分组