Use static data in Vue.js template #10961
Description
I'm trying to make reference to static data (outside of the component state) in my template. I would like to avoid copying every static members in my component private state in order to use them in the component template.
As you can see below it affect every kind of static data.
<template>
<div class="home">
<div v-if="Thing.foo === yourData">
<!--the error message: Property or method "Thing" is not defined on the instance
but referenced during render -->
<p>tata</p>
</div>
<div v-else>
<p>toto</p>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
class Thing {
static foo: number = 1;
}
@Component
export default class Home extends Vue {
yourData: number = 1;
}
</script><template>
<div class="home">
<div v-if="Thing.FOO === yourData">
<!-- same error message -->
<p>tata</p>
</div>
<div v-else>
<p>toto</p>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
enum Thing {
FOO,
BAR,
BAZ
}
@Component
export default class Home extends Vue {
yourData: Thing = Thing.FOO;
}
</script>Can someone advise me on how to allow the use of static data inside vue template?