I have a child component that is responsible for uploading a photo. The uploaded photo is assigned to the child component's data called "photo". I need to connect the parent data called "file" with the child data called "photo". And whenever "photo" is changed, "file" should also be updated.
Child component:
<template>
<div class="select">
<img v-if="previewFile" :src="previewFile" alt="" />
<img v-else src="/images/empty.jpg" alt="" />
<label class="btn" for="image-upload">{{ btnLabel }}</label>
<input id="image-upload" type="file" ref="file" @change="uploadFile" />
</div>
</template>
import { mapGetters } from "vuex";
export default {
name: "SelectPhoto",
data() {
return {
file: null,
previewFile: null,
};
},
methods: {
uploadFile() {
this.file = this.$refs.file.files[0];
}
}
}Parent component:
<template>
<SelectPhoto :btn-label="text.RU.photoSelect.choosePhoto" v-model:file.sync="file"/>
<BaseButton :label="text.RU.photoSelect.knowName" @do="$emit('getResult', file, previewFile)" />
</template>
<script>
export default {
data() {
return {
file: null,
};
},
};
</script>