Error TS2339: The property 'showNewCustomerFields' is not present on the object of type '{ newCustomer(owner: any): void; }'

As a newcomer to both Vue and Ionic, I am struggling to understand why I keep encountering the TS2339 error.

Any assistance on this issue would be greatly valued.

  data() {
    return {
      owner: "default",
      showNewCustomerFields: false,
      newCustomerName: "",
    };
  },
  method: {
    newCustomer(owner) {
      //console.log(owner);
      if (owner === "new") {
        this.showNewCustomerFields = true;
        // console.log(showNewCustomerFields);
      } else {
        // console.log(showNewCustomerFields);
        this.showNewCustomerFields = false;
      }
    },
  },
typescriptvue.jsionic-frameworkvuejs3

Answer №1

According to the information provided in the Vue documentation:

In order for TypeScript to correctly infer types within Vue component options, it is necessary to define components using the global method defineComponent:

Hence, your code should be structured like this:

// MyComponent.vue
import {} from 'vue'

export default defineComponent({
  data() {
    return {
      owner: "default",
      showNewCustomerFields: false,
      newCustomerName: "",
    };
  },
  method: {
    newCustomer(owner) {
      if (owner === "new") {
        this.showNewCustomerFields = true;
      } else {
        this.showNewCustomerFields = false;
      }
    },
  },
})

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

Varied Data Transfer Objects used for requests and responses

Currently, I am dealing with MongoDB and subdocuments. MongoDB automatically adds extra fields that cannot be specified in a POST request; they can only be retrieved using a GET request. To put it simply: different data transfer objects (dtos). I am utili ...

typescriptswaggernestjsopenapidto

Obtaining the src attribute from an object for my Vue.js image

Trying to extract src from object for my Vue.js component export const Quizzes = [ { firstWord: "happy", secondWord: "srećan", imageSrc: "../assets/happy--women.jpg", }, ] This is how my data.js file appears ...

vue.js

Is it possible to use arguments.callee.name in Typescript?

By setting "strict": false in the tsconfig.json file, we are able to access arguments.callee.name. Is there another configuration option that can be enabled while still maintaining "strict": true in order to achieve the same result? I prefer to adhere to ...

javascriptnode.jstypescript

Keep the starting input value stored in Vue.js

In my child component, I am rendering a prop that contains the student ID. I have displayed this value in an input element with the initial value set to the student ID. https://i.sstatic.net/Q2NO7.jpg <form @submit.prevent="insertScore"> <td ...

laravelvue.jsinputaxios

Finding out whether the current date falls between a startDate and endDate within a nested object in mongoose can be done by using a specific method

My data structure includes a nested object as shown: votingPeriod: {startDate: ISOdate(), endDate: ISOdate()}. Despite using the query below, I am getting an empty object back from my MongoDB. const organizations = await this.organizationRepository.find( ...

javascripttypescriptmongodbmongoosenestjs

What is the best way to refresh a multiselect in vue.js?

<form class = "needs-validation" @submit.prevent = "UpdateFormSubmit(holidayObject.id)"> <div class = "row"> <div class = "col-md-6"> ...

vue.jsvuejs2

Utilize the useState() hook to add an object and display its data in a React Native

Here is a function I am working with: const [dataLoc, setDataLoc] = useState({date: "No data received yet from sensor", coords: {}}); This is where I set the location: Geolocation.getCurrentPosition( location => { const date = d ...

typescriptreact-nativestatehookuse-state

Guide on creating a zodiac validator that specifically handles properties with inferred types of number or undefined

There are some predefined definitions for an API (with types generated using protocol buffers). I prefer not to modify these. One of the types, which we'll refer to as SomeInterfaceOutOfMyControl, includes a property that is a union type of undefined ...

typescriptprotocol-bufferszod

The Datepicker in MUI - React is unable to recognize the `renderInput` prop on a DOM element

I've been experimenting with the MUI version 5 DatePicker component. I followed the example provided in the MUI documentation's codesandbox demo. Here is how my component looks: const MonthPicker: FC = () => { const [value, setValue] = Rea ...

javascriptreactjstypescriptmaterial-ui

The parameter type 'NextHandleFunction' does not match the expected type 'PathParams' in the argument

After successfully setting up TypeScript with a basic Express server, I've encountered an issue. import bodyParser from 'body-parser'; import express, { Express } from 'express'; const app: Express = express(); app.use(bodyParser ...

javascriptnode.jstypescriptexpress

How to Utilize Custom Component Tag Names in CSS with Vue.js 2?

<template> <header> <hamburger></hamburger> <app-title></app-title> <lives></lives> </header> </template> <script> export default { name: 'Titlebar& ...

javascriptvue.jsvuejs2vue-component

Error Alert: Redundant Identifier in Angular 2 TypeScript Documents

After following the Angular2 TS Quickstart guide, I noticed duplicate files scattered across various folders in my project. For browser: typings/browser node_modules/angular2/typings/browser Regarding es6-shim: node_modules/angular2/typings/es6-shi ...

typescriptangular

Tips on incorporating the source path from a JSON file into a Vue component

Is there a way to render images if the path is retrieved from a JSON file? Typically, I use require('../assets/img/item-image.png'). However, I'm uncertain how to handle it in this scenario. Component: <div v-for="(item, index) in i ...

javascriptjsonvue.jsvue-clivue-loader

The process of retrieving an item from an HTML node using Vue.js

My scenario involves a Vue app with the following data: data: function() { return { items: [ {id: 1, text: 'one', other_data: {}}, {id: 2, text: 'two', other_data: {}}, {id: 3, text: &apo ...

javascriptvue.js

Step-by-step guide on integrating Bulma page loader extension as a Vue component

Is there a way to integrate the Bulma-extension page-loader element as a Vue component in my project? I attempted to import page-loader.min.js and use it, but unfortunately, it didn't work as expected. <template> <div class="steps"> ...

javascriptvue.jsbulma

webpack is having trouble compiling TypeScript with React components

I've been working on setting up a TypeScript React project with webpack. I followed the TypeScript Tutorial, but I keep running into an error message that says `module parse failed: ... you may need an appropriate loader` Interestingly, I can success ...

reactjstypescriptwebpack

Mastering the art of utilizing async await efficiently

Currently, I am trying to save/update data in my Firestore document. I have successfully implemented this without any issues by using an async function. However, I must admit that I am not very familiar with async functions or promises. I have provided my ...

typescriptgoogle-cloud-firestoreangular6

What is the process for integrating the node-menu package into my project without utilizing the require statement?

Is there a way to incorporate node-menu into my TypeScript project without using require, like this: const menu = require('node-menu'); Whenever I attempt to import node-menu into my project, I encounter the following errors: https://i.sstatic. ...

javascriptnode.jstypescriptnpmnode-modules

Getting a precise element from an array in JSON using Angular 5

I've been struggling to fetch a specific value ("isRight") from a JSON object. I have tried multiple solutions found on stackoverflow and even compared my code with one of them, but I keep getting the value as undefined without any errors. { ...

javascriptjsonangulartypescript

Updating Vue-Devtools props in Chrome while executing asynchronous promise functions: A step-by-step guide

When working with Vue 3 and mutating a prop that is an object (I understand it's not recommended to mutate props directly, but in this case it works because it's passed by reference as an object), I noticed that the changes reflect in the Vue Dev ...

javascriptvue.jsvue-devtools