Vue Class Based Component Warning: Property is not defined on the instance but referenced during render

Question

I am trying to create a vue component with vue-class-component and typescript (found here https://github.com/vuejs/vue-class-component). From what I understand, data is defined in the class, as I have done below - yet I receive the error:

"[Vue warn]: Property or method "test" 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."

Here is a stripped down version of my actual code, but it still doesn't work:

<template>

  <div id="vue-test">
    <input v-model="test"/>
    {{test}}
  </div>

</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
})
export default class AppearanceDialogVue extends Vue {
  public test: string = '100';
}

</script>

EDIT: It appears that changing 'test's declaration to

public test: string;

worked

I have the same issue, I tried every combination for the test declaration, but I get the error no matter what I do. — Frank
– Frank, Commented Oct 14, 2018 at 4:32

seem7teen · Accepted Answer · 2018-10-26 08:25:26Z

4

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>

edited Oct 26, 2018 at 8:25

answered Oct 26, 2018 at 6:21

seem7teen

2735 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

J-J Over a year ago

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. - From Review

seem7teen Over a year ago

Sorry, have found the solution to this issue, edited the answer @JobinJoseph

Collectives™ on Stack Overflow

Vue Class Based Component Warning: Property is not defined on the instance but referenced during render

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related