Property or method "customer" is not defined

[yooouuri]

V-model set to an object.

<template>
  <div>
    <input v-model="customer.name" placeholder="name" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Customer } from '@/Customer';

@Component
export default class Customers extends Vue {
  private customer: Customer | null;
}
</script>

export class Customer {
  constructor(
    public id: number,
    public name: string,
    public company: string) { }
}

The following error occurs

Property or method "customer" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

and

TypeError: Cannot read property 'name' of undefined at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"/Users/yooouuri/PhpstormProjects/factuurenzo/factuurenzo-vuejs/node_modules/.cache/vue-loader","cacheIdentifier":"edb82a1c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Customers.vue?vue&type=template&id=558141d5 (app.js:3316), :61:35) at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:4540) at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:2784) at Watcher.get (vue.runtime.esm.js?2b0e:3138) at Watcher.run (vue.runtime.esm.js?2b0e:3215) at flushSchedulerQueue (vue.runtime.esm.js?2b0e:2977) at Array.eval (vue.runtime.esm.js?2b0e:1833) at flushCallbacks (vue.runtime.esm.js?2b0e:1754)

Like this example, I am doing the same.

https://github.com/johnpapa/vue-heroes/blob/typescript/client/components/HeroDetail.vue#L34

[HerringtonDarkholme]

This line

  private customer: Customer | null;

doesn't initialize property customer but just declare its existence. As the error message, you need to initialize it before use it in template.

[yooouuri]

Kinda ugly to me but

export class Customer {
  constructor(
    public id: number = 0,
    public name: string = '',
    public company: string = '') { }
}

and

private customer: Customer = new Customer();

fixes it.

Thanks @HerringtonDarkholme