Currently, I am working on a project using vuejs 2 and typescript. In this project, I need to pass two different sets of data - data and attachments - within the parent component. I am utilizing vue-property-decorator for this purpose. However, I am facing difficulty referencing attachments while already using data in the Parent component with v-model. Can you guide me on the correct approach to solve this issue?
Parent Component
<template>
<ChildComponent
v-model="data"
:attachments="attachments" How can I reference attachments ?
/>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import ChildComponent from '~/components/ChildComponent'
@Component({
components: {
ChildComponent
}
})
export default class ParentComponent extends Vue {
data: any = {};
attachments: any = [];
}
</script>
Child Component
<template>
<form>
<input type="text" v-model="data.firstname" />
<input type="text" v-model="data.lastname" />
<input type="file" multiple v-model="attachments" />
</form>
</template>
<script lang="ts">
import { Component, VModel, Vue } from 'vue-property-decorator'
@Component
export default class ChildComponent extends Vue {
@VModel() data!: any;
@VModel() attachments!: any;
}
</script>
We appreciate your assistance and guidance.