javascript - v-if 在我的子组件中不起作用
问题描述
每当我的子组件中的 v-if 等于 true 时,我都试图显示一个跨度。任何人都可以建议我做错了什么。目前,我不知道我做错了什么。
子组件
const cardsTemplate = {
template:
`
<fieldset v-if="show.seach_checkboxes">
<span>HELLO WORLD</span>
</fieldset>
`,
props: ['js_local'],
data() {
return {
show:{
search_checkboxes : {
type: Boolean,
default: true,
}
}
}
},
methods :{
change_boolean : function(reverse_boolean){
this.show[reverse_boolean] = !this.show[reverse_boolean]
console.log(this.show)
},
show_search_template: function(){
this.change_boolean('search_checkboxes')
},
get_search_template : function(){
$.post(this.js_local.ajaxurl,
{action : 'get_search_templates'}
).done((data)=>{
this.name = JSON.parse(data)
}).fail((error)=>{
console.log(error)
})
},
}
}
解决方案
看起来您正在尝试使用data()
类型检查,使用相同的方式props
。尝试这个:
data() {
return {
show: {
search_checkboxes: true
}
}
}
此外,在您的模板 HTML 中,您拼写错误search_checkboxes
,它缺少一个“r”。
<fieldset v-if="show.seach_checkboxes">
^^^
推荐阅读
- angularjs - .NET Core 3 预览版:不允许同步操作
- python - Pandas:按行计算值
- nginx - K8S 裸机 nginx-ingress-controller
- java - 如何读取位于 java 项目的另一个包中的属性文件?
- date - 如何在 C++Builder 中比较两个日期。1 个来自 MaskEdit 的日期,2 个来自 Date() 的日期
- amazon-web-services - 我在哪里可以获得 aws get-current-user 的身份验证令牌?
- android - 如何在我的旧 Android 项目中添加生物识别支持 API (AndroidX)
- android - 如何在 FAB 中为可绘制的矢量着色?(android:tint 似乎不起作用)
- r - 用于绘制 allEffects 的反向转换响应
- javascript - 在 React 组件中渲染之前操作数据