Description
Following the guide, but adjusing for vue 2 and typescript, I have the below setup, and it compiles fine but when I go to the page I see the 3 errors at the bottom.
After copy-pasting the guide example exactly it seems to work fine, but I'm wondering if it's possible to get it working in the below way (using Component, Prop, ts etc) ?
<template>
<input ref="inputRef"
:value="formattedValue"
type="text" >
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import useCurrencyInput from 'vue-currency-input'
@Component({
name: "CurrencyInput",
components: {}
})
export default class CurrencyInput extends Vue {
@Prop() value!: number;
@Prop() options!: any;
public formattedValue: string | null = null;
public inputRef: any = null;
constructor() {
super();
const { formattedValue, inputRef } = useCurrencyInput(this.options)
this.inputRef = inputRef;
this.formattedValue = formattedValue.value;
}
}
</script>
Calling normally like this:
<currency-input v-model="testValue" options="{ currency: 'EUR' }" />
Errors:
[Vue warn]: Error in data(): "Error"
found in
---> at wwwroot/components/util/currencyInput.vue
vue. 5746 js:1896 Error
at useCurrencyInput (index.esm.js:475)
at new CurrencyInput (currencyInput.vue:62)
at collectDataFromConstructor (vue-class-component.esm.js:168)
at VueComponent.data (vue-class-component.esm.js:230)
at getData (vue.js:4744)
at initData (vue.js:4701)
at initState (vue.js:4640)
at VueComponent.Vue._init (vue.js:4999)
at new CurrencyInput (vue.js:5146)
at createComponentInstanceForVnode (vue.js:3289)
vue.js:633 [Vue warn]: Property or method "formattedValue" 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.
found in
---> at wwwroot/components/util/currencyInput.vue