In my Vue component, I am utilizing the vue-bootstrap Modal component with the following setup:
<template>
<div>
<b-modal ref="NewProjectDialog" id="NewProjectDialog" centered>
</b-modal>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import {BModal} from 'bootstrap-vue'
@Component()
export default class Projects extends Vue {
save_project() {
(this.$refs['NewProjectDialog'] as BModal).hide()
}
}
While the above code functions as expected, there seems to be an issue in how I am casting $ref['NewProjectDialog']. The compiler is interpreting the preceding line as part of the expression, resulting in a
"Cannot invoke an expression whose type lacks a call signature."save_project() {
console.log('any code line without a semicolon fails')
(this.$refs['NewProjectDialog'] as BModal).hide()
}
However, if I add a line separator like so:
save_project() {
console.log('any code line without a semicolon fails');
(this.$refs['NewProjectDialog'] as BModal).hide()
}
It compiles without any issues. Can someone clarify why the line separator is necessary for the code to work properly?