There was an issue with the computed property: "Parsing error - '}' was expected

While trying to set a computed property in my Vue component using TypeScript to specify a return type, I encountered an error from eslint. Even though the application functions correctly, the error persists.

I have experimented with removing the typing and also tried associating a get(), but the issue remains regardless of formatting.

presets():Array<Iperf>{
    return this.$store.state.presets.iperf
}

The expected outcome is no error, yet the actual result shows:

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Parsing error: '}' expected at src\views\Iperf.view.vue:58:17:
  56 |     },
  57 |     computed: {
> 58 |         presets():Array<Iperf>{
     |                 ^
  59 |             return this.$store.state.presets.iperf
  60 |         }
  61 |     }

Answer №1

After some investigation, I discovered that ESLINT was mistakenly attempting to interpret my TypeScript code as JSX. This led me to make some adjustments to the formatting.

Instead of: iperf:<Iperf>{}

Consider using: iperf: {} as Iperf

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

Distribute information to every recipient components using observables in Angular2

I am facing an issue where I want to send data to all elements named 'modal', but only one of them is receiving the message. Here is my service: @Injectable() export class ModalService { private _isOpen = new Subject(); isOpen$ = this._isOpen. ...

The Nuxt authentication middleware fails to function properly upon clicking the back button in the browser

When it comes to implementing the protected route in Nuxt, I have found that using middleware is the best approach. In my implementation, I utilized the cookie-universal-nuxt module. Everything was running smoothly until I encountered a bug. When a user&a ...

Guide to passing arguments to a function within Vue's v-for loop?

Is there a way to pass the parameter {{ item.id }} to my function productos.mostrarModal() within a v-for loop in vue.js? <div v-for="item of articulos"> <a href="#" onclick="productos.mostrarModal()" > <h2>{{item.name}}< ...

How to manually add the $store parameter to a dynamically created Vue component that is missing it during creation

I'm a newcomer to the world of Vue/Nuxt and I've encountered an issue while attempting to dynamically generate a Vue component on button click using the following code: async addComponent(componentsItem) { var ComponentClass = Vue.component(&a ...

Boosting NestJS Performance with PM2 Multiple Instances

Currently, I have a NestJS application that I typically deploy using PM2 in cluster mode with multiple instances running. One thing to note is that NestJS utilizes the Singleton pattern for its services. This is crucial for some of my features, as it allo ...

Tips for creating a window closing event handler in Angular 2

Can someone guide me on how to create a window closing event handler in Angular 2, specifically for closing and not refreshing the page? I am unable to use window.onBeforeunLoad(); method. ...

Ionic user interface is not appearing on screen

While following a tutorial on this website, I encountered my first issue in the file todo.service.ts: An error stating "Property 'key' does not exist on type 'Todo'" was displayed. Below is the interface code for todo.ts: export inte ...

Angular Material: Enable Window Dragging Across Multiple Monitors

Exploring the usage of Angular Material Dialog or any other Popup Window Component. The functionality is mostly working as expected, with the exception of the last point. a) The original screen should not have a grey overlay, b) Users should be able to i ...

Adapting the visible outcome based on the second figure of a numerical value

Is there a way to automatically change the displayed value using a Vue filter when the last digit of the value falls within a specific range, such as 2-4? I am looking for a solution that can work for all possible intervals like (22-24, 32-34, 622-624... ...

Determining the generic type argument of a class can be unsuccessful due to the specific properties within that class

Why is it that Typescript sometimes fails to infer types in seemingly simple cases? I am trying to understand the behavior behind this. When Typescript's Type Inference Goes Wrong Consider the scenario where we have the following class declarations: ...

What is the method for binding 2 values with v-model?

While using the buefy <b-autocomplete> component, I encountered a situation where I needed to bind the Full Name into the input field. However, the data consists of list[index].first_name and list[index].last_name, with the index being from a v-for l ...

What is the best way to dynamically assign formControlNames in Angular using *ngFor?

I am currently facing a challenge with setting form controls using *ngFor over objects in an Array. The number of objects in the array can vary, sometimes resulting in only 1 object while other times multiple objects are present. My specific issue revolve ...

What is the best approach for creating a flawless vue.js action that effectively retrieves data from a server while also implementing robust error handling?

export const retrieveEnvironmentsInfo = ({ commit }, parameters) => { Vue.http.get('/environments', { parameters }) .then(reply => reply.json()) .then(info => { if (info) { commit('ada ...

The validation for the prop 'setLoading' is not defined

Currently, I am utilizing React version 17.0.2 along with Typescript for my project. My aim is to transfer the setLoading function from the parent component (App) to the child component (About) so that the loading state within App can be altered from About ...

What is the best way to create two MUI accordions stacked on top of each other to each occupy 50% of the parent container, with only their contents scrolling

I am looking to create a layout with two React MUI Accordions stacked vertically in a div. Each accordion should expand independently, taking up the available space while leaving the other's label untouched. When both are expanded, they should collect ...

Tips for customizing the color scheme of background, rows, row selection, and headers in Angular 4 using Bootstrap 4 data tables

I've integrated Bootstrap 4 data table in my Angular 4 project, but I'm struggling to customize row colors, row selection colors, and header colors. You can check out the example of the data table I'm using at this link: https://github.com/ ...

Instructions for utilizing "hasPermissionTo" within a Vue template

I am struggling with my code and I am unsure how to utilize hasPermissionTo in a Vue template to verify if a role has permission to perform a certain action. <script setup> import { Link } from "@inertiajs/inertia-vue3" import { defineProps ...

What is the best way to extract a parameter from a URL in Vue.js and incorporate it into the router file?

My current setup includes a router file that houses all my routes. Let's take a look at an example of one route: path: '/events/:step', children: [ { path: '', name: 'event.step', co ...

Where can Vue.js be found?

After dedicating an hour to watching instructional YouTube videos on Vue.js, I am still struggling to grasp the language! In the past, I have worked with Node.js, Jquery, and Mongodb to develop websites... I believe that web applications require multiple ...

Error: Uncaught TypeError - Unable to assign a value to the 'status' property

Hello everyone, I am currently facing an issue with validating the response from my server using Axios in VueJS. axios.post('/login', { email: this.email, password: this.password }).then(response => { if (response.status == 200) { $ ...