Cannot access data from a method in Vue.js (with Ionic)

Issue

I am trying to access a variable from a method, but I get : Property 'commentLikeVisible' does not exist on type '{ toggleCommentLikeVisible: () => void;

Here is my code:

<template>
    <div 
        class="moments-item" 
        data-index="0"
    >
        <div class="item-right">
            <div class="item-ft">
                <div 
                    class="item-reply-btn" 
                    @click="toggleCommentLikeVisible"
                >
                    <span class="item-reply" />
                </div>
                <CommentLikeModal 
                    v-if="commentLikeVisible" 
                />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import CommentLikeModal from '@/components/CommentLikeModal.vue';

export default {
    name: 'MomentItem',
    components: {
        CommentLikeModal
    },
    data() {
        return {
            commentLikeVisible: false
        }
    },
    methods: {
        toggleCommentLikeVisible: function() {
            this.commentLikeVisible = !this.commentLikeVisible;
        }
    }
}
</script>

I already tried toggleCommentLikeVisible() instead of toggleCommentLikeVisible: function() with the same result.

I have no idea what could be wrong in there.

Solution

I think it is a warning/error because you have <script lang="ts"> if you edit the script tag, it appears to go away in the sample project I created <script>

Answered By - Aaron Saunders