The computed function is unable to find the property on the specified type

I am a beginner in TypeScript. I have encountered an issue with the code below, which runs perfectly fine in JavaScript but is not compiling here.

export default {
  data: function() {
    return {
      data: [
        'Angular',
        'Angular 2',
        'Aurelia',
        'Backbone',
        'Ember',
        'jQuery',
        'Meteor',
        'Node.js',
        'Polymer',
        'React',
        'RxJS',
        'Vue.js'
      ],
      name: "",
      selected: null,
      hasVariationRadio: ""
    };
  },
  computed: {
    filteredDataArray(): [] {
      return this.data.filter((option: string) => { // This is where the error appears
        return option
          .toString()
          .toLowerCase()
          .indexOf(this.name.toLowerCase()) >= 0 // Also here.
      })
    }
  }
};

The error message I'm receiving is:

Property 'name' does not exist on type '{ filteredDataArray(): []; }'.

I have set strict to true in the tsconfig.json file as mentioned on the Vue.js documentation website.

Answer №1

Every time I run this piece of code in the console, it seems to give unexpected results.

When utilizing this within computed.filteredDataArray, keep in mind that this refers to the specific context of the computed object rather than the entire entity.

Transferring filteredDataArray up one level resolves the issue:

export default {
    data: function () {
        return {
            data: [
                'Angular',
                'Angular 2',
                'Aurelia',
                'Backbone',
                'Ember',
                'jQuery',
                'Meteor',
                'Node.js',
                'Polymer',
                'React',
                'RxJS',
                'Vue.js'
            ],
            name: "",
            selected: null,
            hasVariationRadio: ""
        };
    },
    filteredDataArray() {
        return this.data().data.filter((option: string) => {
            return option
                .toString()
                .toLowerCase()
                .indexOf(this.data().name.toLowerCase()) >= 0
        })
    }
};

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

Angular: ChangeDetection not being triggered for asynchronous processes specifically in versions greater than or equal to Chrome 64

Currently, I'm utilizing the ResizeObserver in Angular to monitor the size of an element. observer = new window.ResizeObserver(entries => { ... someComponent.width = width; }); observer.observe(target); Check out this working example ...

What is the best method for developing a draggable element that remains stable?

I have developed a simple script for draggable elements, however, I am facing an issue. Whenever I move the mouse quickly, the element loses focus. Is there a way to improve the stability of the dragging functionality regardless of how fast I move the mou ...

Angular 4 incorporates ES2017 features such as string.prototype.padStart to enhance functionality

I am currently working with Angular 4 and developing a string pipe to add zeros for padding. However, both Angular and VS Code are displaying errors stating that the prototype "padStart" does not exist. What steps can I take to enable this support in m ...

Developing an Angular 2 Cordova plugin

Currently, I am in the process of developing a Cordova plugin for Ionic 2. The plugin is supposed to retrieve data from an Android device and display it either on the console or as an alert. However, I am facing difficulty in displaying this data on the HT ...

Differences between Vue.js Composition API and Options API - utilizing posts ref within a v-for iteration

I am relatively new to working with VueJS, and I am facing a challenge that has me stumped. On a page that fetches data using axios from my posts on a wordpress site: export default { data() { return { postsUrl: "https://localhost/wordpre ...

Exploring Angular 2 with Visual Studio 2015 Update 1 in the context of Type Script Configuration

After spending the last week attempting to set up and launch a simple project, I am using the following configuration: Angular 2, Visual Studio 2015 update 1, TypeScript Configuration In the root of my project, I have a tsconfig.Json file with the follow ...

Importing Heroicons dynamically in Next.js for more flexibility

In my Next.js project, I decided to use heroicons but faced a challenge with dynamic imports. The current version does not support passing the icon name directly to the component, so I created my own workaround. // HeroIcon.tsx import * as SolidIcons from ...

Troubleshooting VueJS: Issue with $router.push and passing query parameters

In my NuxtJS(v. 2.10.2) application, there is a URL structure that includes the post's id like this: /post?pid=5e4844e34202d6075e593062. The URL works fine and loads the post based on the value of the pid query parameter. However, when a user adds ...

Trying out the results of angular services

Seeking assistance in understanding the current situation: I believe a simple tour of heroes app would be helpful in clarifying, I am looking to set up some tests using Jest to verify if the behavior of a service remains consistent over time. This is ho ...

Vue.js creates a new row in the table with an undefined array of data

Trying to create a new row when clicking "+" using Vue Js Encountering an error: tablerows is not defined Vue.component('inp-row', { props: ['data'], template: `<tr :id="data.row_id" ><td> 1</td><td>2 < ...

Dragging and dropping elements onto the screen is causing them to overlap when trying

I am having trouble merging the drag and drop functionality from Angular Material with resizing in a table. Currently, both features are conflicting and overlapping each other. What I am hoping for is to automatically cancel resizing once drag and drop s ...

Changing the type of an object's property in TypeScript on the fly

I am working on a TypeScript function that is designed to dynamically modify the property of an object. Here is the function: const updateProperty = (value: any, key: keyof Type1, obj: Type1) => { obj[key] = value; } Below is the definition of "Typ ...

The TypeORM connection named "default" could not be located during the creation of the connection in a Jest globalSetup environment

I've encountered a similar issue as the one discussed in #5164 and also in this thread. Here is a sample of working test code: // AccountResolver.test.ts describe('Account entity', () => { it('add account', async () => { ...

typescript provides an asynchronous recursive mapping function that allows for changing parent data starting from the leaf node

I am currently facing a challenge in identifying the leaf node within a non-binary tree that requires modification. The process involves computing a blake2b hash from the leaf data, passing it to the parent node, and repeating this calculation until reachi ...

What is preventing me from using property null checking to narrow down types?

Why does TypeScript give an error when using property checking to narrow the type like this? function test2(value:{a:number}|{b:number}){ // `.a` underlined with: "Property a does not exist on type {b:number}" if(value.a != null){ ...

Altering the properties of a specified element within TestBed using the overrideComponent method

We are implementing TestBed.overrideComponent() to substitute a component with custom behavior. TestBed.overrideComponent(CoolComponent, { set: { template: '<div id="fake-component">i am the fake component</div>', sel ...

Angular 14.2.9: "Trouble with Form Data Binding - Seeking Assistance with Proper Data Population"

I'm currently using Angular version 14.2.9 and the component library I'm utilizing is: import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; While working on binding data to a form, I encountered an issue where the data wasn't d ...

Steps for injecting strings directly into Angular2 EventBindingWould you like to learn how

Is it feasible to achieve something similar to this? <li><a href="#" target="_blank" (click)="createComponent(MYSTRINGHERE)">Departamentos</a></li> ...

Implementing anchor tags in VueJS Swiper

Regarding a VueJS 2.0 project using Swiper v8.3.2, there is an issue with a swiperSlide that resembles the following code: <template> <a :href="url" :title="title" >{{ title }}</a> </template> How ca ...

Having trouble with Angular 2 and ng2-file-upload when trying to load it using SystemJS

Currently, I am utilizing systemJS for package management in my project. In order to configure systemJS, I have included the following lines in the configuration file: { map: { 'ng2-file-upload': 'node_modules/ng2-file-upload' }, p ...