When passing a prop to a child component in Vue, the documentation states:
The parent component updates will refresh all props in the child component with the latest value. Avoid mutating a prop inside a child component as Vue will warn you in the console.
Use the prop to pass an initial value; then have the child component treat it as a local data property. Define a local data property using the prop's initial value:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
We are working with Typescript. The syntax for defining a local data property is as follows (from my understanding):
<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
@Component
export default class App extends Vue {
// Data property
myDataProperty: string;
</script>
The syntax for a prop is as follows:
@Component
export default class App extends Vue {
// Making "exampleProperty" a component prop with the default value of 'Example'
@Prop({default: 'Example'})
exampleProperty: string
}
Thus, we followed the documentation and ended up with:
parentComponent.vue
<template>
<childComponent testProperty='test' />
</template>
childComponent.vue
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class childComponent extends Vue {
@Prop(
{
default: 'notTest',
validator: (component) => {
return [
'notTest',
'test',
].indexOf(component) > -1;
},
},
)
testProperty!: string;
testProperty = this.testProperty;
</script>
This resulted in an error `Duplicate identifier testProperty` as expected. Therefore, we tried:
...
testProperty!: this.testProperty;
...
which led to the following error message:
Duplicate identifier 'testProperty'. Property 'testProperty' has no initializer and is not definitely assigned in the constructor. Subsequent property declarations must have the same type. Property 'testProperty' must be of type 'this', but here has type 'any'.
Consequently, I decided to try the "vue-class-component" decorator.
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
data: function(){
return {
testProperty: this.testProperty,
}
}
})
export default class childComponent extends Vue {
@Prop(
{
default: 'notTest',
validator: (component) => {
return [
'notTest',
'test',
].indexOf(component) > -1;
},
},
)
testProperty!: string;
testProperty = this.testProperty;
</script>
This resulted in the error
Property 'testProperty' does not exist on type 'Vue'.I intend to do
this.testProperty = 'newProperty'How can I define a local data property that uses a prop as its initial value in Typescript?
EDIT:
If I simply define the prop without attempting to define a local data property using it as the initial value, and then execute
this.testProperty = 'test'
in a handler, Chrome console displays this error:
vue.runtime.esm.js[Vue warn]: 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: "testProperty"