Currently, I am utilizing VUE 2.6.11 along with class components. My current objective involves encapsulating components that can serve as modals inside a separate component responsible for managing the modal state.
According to the documentation, it is possible to access child props/methods within a parent component using Scoped Slots. However, I am encountering an issue where my method fails to bind to a template:
In my Modal.vue file:
@Component
export default class Modal extends Vue {
@Prop(String) icon !: string
@Prop({ default: 'Open popup' }) tooltip !: string
isVisible = false
toggleModal() {
console.log('toggleModal from Modal')
this.isVisible = !this.isVisible
}
toggleModalFactory = 'simple property'
}
Template code snippet:
<div >
<div v-if="isVisible" class="page overlay" >
<div class="page-content" >
<div class="dialog-content" >
<div class="row col" >
<slot :toggle-modal="toggleModal" />
</div >
</div >
</div >
</div >
<button class="btn-primary btn-icon"
:title="$t(tooltip)"
@click="toggleModal()" >
<i :class="icon" />
</button >
</div >
Subsequently, in my Parent component, the following setup is implemented:
<modal icon="plus-icon" v-slot:default="modal" >
<test-component :toggle-modal="modal.toggleModal" ></test-component >
</modal >
The development tools indicate that my method is indeed bound, as illustrated https://i.sstatic.net/QmQNr.png.
However, upon executing the prop function within my nested modal content (TestComponent.vue):
export default class TestComponent extends Vue {
@Prop() toggleModal !: Function
@Emit()
dismiss() {
this.toggleModal()
console.log('dismiss from TestComponent')
}
@Emit()
accept() {
this.toggleModal()
console.log('accept from TestComponent')
return 'close-success'
}
}
The following errors are produced:
[Vue warn]: Property or method "toggleModal" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.Additionally, there is an accompanying error message:
TypeError: this.toggleModal is not a functionWhile trying to troubleshoot, I came across this post, which leads to the same documentation I initially consulted. Unfortunately, I cannot identify any discernible difference that may be causing issues within my code.