1
<input type="file" name="" value="">
  <button type="button" name="button">Add More Pictures</button>

I created a file uploader and a button next to it. What I want is, If I hit the "Add More Pictures" button another file uploader with another Add More Pictures button should be load below the button.

How can I do this using VueJS?

1
  • Let me know how it goes for you. Commented Mar 2, 2018 at 10:56

1 Answer 1

2

Create a range-based loop that creates fields as a numeric vm property increases.

<div v-for="n in uploadFieldCount" :key="n">
  <input type="file" name="" value="">
  <button type="button" name="button" @click="uploadFieldCount++">Add More Pictures</button>
</div>

and add that property in the data section of your vm:

data() {
  return {
    uploadFieldCount: 1 // initialize with the number of initial file uploads you need
  }
}
Sign up to request clarification or add additional context in comments.

4 Comments

It works! Thanks a lot. =) and Is there a way to remove elements from the that rendered elements. (Using a "Remove this file upload" button)
You an always remove the last one using uploadFieldCount--.
It seems to me that v-for should be used with key property. To ensure that the input values are not lost after adding another.
@Ruslan Though this is only a requirement if using v-for on components, it does not hurt adding it. Done.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.