Property does not exist on type vuejs pwa data() function

Question

I know this is probably basic, but I can't figure it out.

I built a VueJS PWA with the vue-cli 3, everything works, but when I try to serve my app to test, or build for production I always get the error: property '' does not exist on type ''.

An example of my code:

import { Component, Prop, Vue } from "vue-property-decorator";
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.min.css";
import db from "@/db";

@Component({
  components: {
    VueperSlides,
    VueperSlide
  }
})
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;

  data() {
    return {
      houses: [],
      provinces: []
    };
  }


 private created() {
    const moment = require("moment");
    var date = moment(new Date()).format("YYYY-MM-DD");
    db
      .collection("houses")
      .where("valid_until", ">", date)
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          this.houses.push(doc.data());
        });
      });
  }

On the above example I keep getting the error 'Property houses does not exist on type HelloWorld. But It doesn't matter where I'n my project / components I'm trying to access a data() variable, I always get the same error but then for different variables I define in my components.

Does anyone know what the problem is, because I don't really know what it could be.

Answer 1

The problem is the data declaration. With class style components, you don't declare a data property as you normally do, instead declare the individual data properties as:

// good
private houses: any[] = []
private provinces: any[] = []

// bad
data() {
  return {
    houses: [],
    provinces: []
  };
}

You can of course change the any[] types to match how you've actually defined houses and provinces, i.e. object[], HouseInterface[], etc.