Vue 3 set ref value inside function

Question

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>

props are passed in from the parent, and shouldn't really be changed in the child. If you want something to modify locally, you should use a variable instead. — match
– match, Commented Nov 30, 2021 at 10:06

Boussadjra Brahim · Accepted Answer · 2021-11-30 10:06:10Z

2

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

answered Nov 30, 2021 at 10:06

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 3 set ref value inside function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related