TS2339: Property 'showNewCustomerFields' does not exist on type '{ newCustomer(owner: any): void; }'

Issue

I'm new to both vue an ionic and i am unable to figure out why i am getting this TS2339 error.

Any help will be greatly appreciated

  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;
      }
    },
  },

Solution

From the Vue docs:

To let TypeScript properly infer types inside Vue component options, you need to define components with defineComponent global method:

So your code should look 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;
      }
    },
  },
})

Answered By - tony19