Vue: A selected file disappears after switching radio buttons on Vuejs

[ys64]

Version

2.5.16

Reproduction link

https://stackoverflow.com/questions/51272049/a-selected-file-disappears-after-switching-radio-buttons-on-vuejs

Steps to reproduce

1. Go to "https://stackoverflow.com/questions/51272049/a-selected-file-disappears-after-switching-radio-buttons-on-vuejs"
2. Click "Run code snippet"
3. Click "Test1"
4. Upload any file
5. Make sure that the file name you uploaded shows up
6. Click "Test2"
7. Click "Test1"

What is expected?

The file you uploaded still exists, and it shows the file name.

What is actually happening?

It shows "No file chosen."

---

I know this is a multiple post, and it is not a good practice, but I would like to know how to fix this issue.

[LinusBorg]

You used a v-if in the file with a condition that will be false after ou click test 2. Consequently, Vue will remove the file input from the DOM, and the file disappears.

You can use v-show instead.

[ys64]

Thank you very much! I replaced v-if with v-show, and it resolved my issue!

I spent hours to try to figure it out, and finally it works as I wished. I learned the difference between v-if and v-show, and actually, it is mentioned in the Guide:

https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

Thank you! I learned a lot!

[cobidennis]

I had similar issue while usingv-ifto step through different part of a form. when "Next" is clicked, i increment the step variable so that a different part shows and and a "back" button decrements the step variable to show the previous page just like a "stepwizard". Then i noticed that all the uploaded files disappears from DOM but was still available in my local file variable in the data section when back is clicked

I guess I have to take time and go through vuejs documentation so that i don't miss vital details that will save me some trouble. #lesson learned