javascript - 从 VueJS 中的子组件获取父计算函数的值
问题描述
我正在尝试将更改的计算方法的值传递给我的子组件,但收效甚微。我正在制作一个按钮组件,它有几种不同的保存状态——但我的按钮总是卡在一个上,并且不会与父级一起更新。
当我不尝试将此按钮用作组件并将其直接放入父级时,我的计算方法工作正常,所以问题是我如何传递数据。
家长
computed: {
isSaving() {
return (
this.$_.values(this.$store.getters["CommonSettings/saving"]).filter(
status => status && status != "done"
).length > 0
);
}
<SaveButton v-bind:saveState="isSaving"/>
孩子
<script>
export default {
name: "saveButton",
props: ['saveState']
}
</script>
<template>
<div class="settings--button-wrapper">
<button v-if="!saveState">
Save
</button>
<button v-if="saveState">
Saving..
</button>
</div>
</template>
我在这里做任何明显错误的事情吗?
解决方案
家长
computed: {
isSaving() {
// add `this.`
return (
this.status && this.status != "done"
)
);
}
}
<SaveButton v-bind:saveState="isSaving"/>
孩子
<script>
export default {
name: "saveButton",
props: ['saveState']
}
</script>
<template>
<div class="settings--button-wrapper">
<!-- use `saveState` -->
<button>
{{ saveState ? 'Saving..' : 'Save' }}
</button>
</div>
</template>
推荐阅读
- vb.net - VB.NET 休息客户端 POST -d 正文
- java - MongoDB为大写键返回空值
- django - 如何在模型中注释来自其他模型的聚合
- php - 根据星期几禁用特定类别中所有产品的购买按钮
- azure - 我必须验证后端服务吗?
- javascript - 压缩字符串不适用于所有字符串
- google-apps-script - 需要在 Google Apps 脚本中获取图表系列
- python - 我收到 ZeroDivisionError ,我该如何解决?
- arrays - 在 tcl 中打印动态数组的内容
- javascript - 如何在我的测验机器人中显示下一个问题并修复错误?