Unable to retrieve information from a function in Vue.js (using Ionic framework)

When attempting to extract a variable from a method, I encounter the following error message:

Property 'commentLikeVisible' does not exist on type '{ toggleCommentLikeVisible: () => void;

This is the code I am working with:

<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"&quo t>
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 have attempted using toggleCommentLikeVisible() in place of

toggleCommentLikeVisible: function()
but encountered the same issue. Any insight into what may be causing this problem would be greatly appreciated.

Answer №1

It seems like a warning or error due to the presence of

<script lang="ts">
. When I modified the script tag in my sample project to <script>, the issue disappeared.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Webpack and React.js: Additional loaders might be required to manage the output generated by these loaders

An error occurred while parsing the module in ./productFlow/index.tsx at line 3, column 12. The file was processed with the following loaders: * ./node_modules/awesome-typescript-loader/dist/entry.js. It seems like an additional loader may be needed to h ...

Guide on combining item costs and showing the total price using Vuejs and Vuex

I need help with writing code in vuex to pull data as a getter from Cart View. Specifically, I want to display the total price of chosen products and ensure that it is added up and displayed correctly. Any guidance on how to achieve this would be appreciat ...

When creating an async function, the type of return value must be the universal Promise<T> type

https://i.stack.imgur.com/MhNuX.png Can you explain why TSlint continues to show the error message "The return type of an async function or method must be the global Promise type"? I'm confused about what the issue might be. UPDATE: https://i.stac ...

The VUE project encountered a critical error and failed to launch successfully

Does anyone know why the new VUE project is only showing an error when trying to run it? ...

Adding a total property at the row level in JavaScript

Here is a JavaScript array that I need help with: [{ Year:2000, Jan:1, Feb: }, {Year:2001, Jan:-1, Feb:0.34 }] I want to calculate the total of Jan and Feb for each entry in the existing array and add it as a new property. For example: [{ Year:2000, Ja ...

Exploring TypeScript interfaces with optional properties and returning types

As a newcomer to TypeScript, I am currently exploring the documentation and came across an example in the "Optional Properties" section that caught my attention: interface SquareConfig { color?: string; width?: number; } function createSquare(config: ...

The value of Vue.js props appears as undefined

It appears that I may be misunderstanding how props work, as I am encountering difficulty passing a prop to a component and retrieving its value, since it always shows up as undefined. Route: { path: '/account/:username', name: 'accco ...

"Troubleshooting: Resolving 404 Errors with JavaScript and CSS Files in a Vue.js and Node.js Application Deploy

I successfully developed a Vue.js + Node.js application on my local server. However, upon deploying it to a live server, I am facing a 404 error for the JavaScript and CSS files. I have double-checked that the files are indeed in the correct directories on ...

"NgFor can only bind to Array objects - troubleshoot and resolve this error

Recently, I've encountered a perplexing error that has left me stumped. Can anyone offer guidance on how to resolve this issue? ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supp ...

Building a versatile component library for Next.js using TypeScript and Tailwind CSS: Step-by-step guide

Lately, I've been utilizing Next.js and crafting components such as buttons, inputs, and cards with Tailwind CSS for my various projects. However, the repetitive task of rewriting these components from scratch for each new project has become quite tir ...

Vue Composition API: Achieving bidirectional data binding with conversion at the component level

Imagine having a reactive object value rgb = ref<RgbColor>({ r:0, g:0, b:0 }) and wanting to create another value hsv from it that updates hsv whenever rgb's attributes (r, g, b) change (not necessarily instantly, but at least upon reading hsv) ...

Issues with Vue Router functionality in Leaflet Popup are causing unexpected behavior

Incorporating Leaflet and Vue together in my codebase using the vue2-leaflet wrapper has presented a challenge. Specifically, I am facing difficulties getting Vue $router to function within Leaflet's popup. Below is a snippet of my current code along ...

Problem with Typescript and packages.json file in Ionic 3 due to "rxjs" issue

I encountered a series of errors in my Ionic 3 project after running ionic serve -l in the command terminal. The errors are detailed in the following image: Errors in picture: https://i.sstatic.net/h3d1N.jpg Full errors text: Typescript Error ';& ...

An issue has been detected with the width attribute in Typescript when using

I have a question regarding the TypeScript error related to the width property. I've created a component called ProgressBar where I'm using Stitches for styling. However, TypeScript is throwing an error even when I specify the type as ANY. impor ...

Tips for displaying Vue Components on an HTML5 canvas surface

How can I incorporate an htmlcanvas as the webpage background and overlay Vuejs components on top of it? I know the answer must exist, but I'm not sure where to start looking. ...

Angular 2 orderByPipe not displaying any results initially

At first, I thought the reason for not displaying anything initially was due to it not being async and returning an empty array. Everything worked fine without the pipe, but the posts weren't shown on startup. After submitting a post, all the posts ap ...

Encountered an issue during the Jest test where the error message states 'Cannot call Class constructor Stack without using the keyword 'new''

I have encountered an issue with my Jest test for an AWS CDK configuration import { expect as expectCDK, matchTemplate, MatchStyle } from '@aws-cdk/assert'; import * as cdk from '@aws-cdk/core'; import { KmsMultiregionPrincipalKey } fro ...

Mastering Kendo UI in Vue: The Ultimate Guide to Managing Child Checkboxes in TreeView

I am currently utilizing Telerik's Vue wrappers for Kendo UI. With the TreeView control, both the jQuery version and MVC wrappers have a feature that allows a property to automatically check child checkboxes when the parent checkbox is checked. ...

Omitting authentication request in Laravel Echo server CLI on the server

Everything runs smoothly on my local machine, but for some reason it's not working on the server. Image from my local environment Image from the server I am using Laravel 5.8 and Vue.js. The domain is HTTPS encrypted. ...

Tips for utilizing the Fluent UI Northstar Color Palette

When working with Fluent UI Northstar, one helpful feature is the color palette. While the documentation provides a list of color names and gradients that can be found here, it can be confusing on how to actually utilize these values (such as 100, 200, e ...