Vue 3 set ref value inside function-CodePudding

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 ">
    <label for="fileUploaderInput" >
    </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>

CodePudding user response：

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