I have a child component in my Vue application that utilizes Vuex for managing certain values.
Currently, when I trigger an action in the parent component, it should also trigger the child component. This is achieved by passing an active boolean prop to the child component.
Within the updated method of the child component, necessary operations are carried out when triggered.
Issue
The problem arises when I realize that the updated method does not get triggered unless the active prop is added to the template as well. As a workaround, I am currently using v-show="!active || active" which essentially means "always show the div."
Is there a way to trigger the component without resorting to such a hack? I would prefer not to expose the active value in my template.
Child Component Implementation
Vue.component('p-inline-readonly', {
mixins: [ table_mixin ],
props: {
value: [ String, Number ],
active: Boolean
},
updated() {
this.reset();
this.refocus();
},
template: /*html*/ `
<div class="slot p-inline-readonly">
<div class="presentation" v-show="!active || active">
{{value}}
</div>
</div>
`
});