I have value 'reset', that should be set to false when file is uploaded. After fileUpload function is triggered, 'reset' is still 'true' (it is set to 'true' externally), how to set it to 'false' on file upload?
<template>
reset: {{reset}}<br> // should display variable here
<div class="fileDnd m0"">
<label for="fileUploaderInput" class="">
</label>
<input
type="file"
name="fileUploaderInput"
@input="fileUpload"
/>
</div>
</template>
<script>
import { ref, toRefs } from "@vue/reactivity";
export default {
name: "Upload",
props: {
reset: {
type: Boolean,
default: false,
},
},
emits: ["upload"],
setup(props, { emit }) {
const { reset } = toRefs(props);
const fileNames = ref("");
function fileUpload(event) {
reset.value = false;// should be set here
const files = event.target.files;
emit("upload", files);
}
return {
fileNames,
fileUpload,
reset,
};
},
};
</script>
Since that reset is a prop, it should be updated inside the parent component inside the upload event handler :
uploadHandler(files){
//update the reset here
}
or you could create a ref that takes the reset prop as initial value, then update it as you did above