“Property or method ”foo“ is not defined on the instance but referenced during render” Vuejs Typescript

Question

Property or method "foo" 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.

I have worked with vuejs, now I'm shifting to typescript facing this issue for trying to access a simple property and making it reactive.

Similar question has been asked but no solution yet : Vue Class Based Component Warning: Property is not defined on the instance but referenced during render

<template>
    <section class="dropdown" style="background-color: #dde0e3">
      <select class="btnList" v-model="foo">
        <option v-for="item in selectedfooData" :value="item" :key="item.id">{{item}}</option>
      </select>
      {{foo}}
    </section>
</template>

<script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 @Component
 export default class HelloWorld extends Vue {  
   private foo: string;
     private selectedfooData : string[] = [
     'one',
     'two'
     ]
 }
</script>

I have tried a workaround for this by adding the property as a prop but this gives me error saying, So what is the right way to try this out ?

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "foo"

 @prop()
 private foo: string;

Answer 1

Here is the solution to this issue, need to add a constructor and initialize the property in the constructor

<template>
<section class="dropdown" style="background-color: #dde0e3">
  <select class="btnList" v-model="foo">
    <option v-for="item in selectedfooData" :value="item" :key="item.id">{{item}}</option>
    </select>
    {{foo}}
  </section>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';
  @Component
  export default class HelloWorld extends Vue {  
  private foo: string;
  private selectedfooData : string[] = [
   'one',
   'two'
  ]
  construtor() { 
    super();
    this.foo = '';
  }

 }
</script>