Vue JS rendering HTML elements

Question

<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?

Let me know how it goes for you.

connexo
– connexo

2018-03-02 10:56:11 +00:00
Commented Mar 2, 2018 at 10:56 — connexo
– connexo, Commented Mar 2, 2018 at 10:56

connexo · Accepted Answer · 2018-03-02 12:25:52Z

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
  }
}

edited Mar 2, 2018 at 12:25

answered Mar 2, 2018 at 10:48

connexo

57.2k15 gold badges112 silver badges149 bronze badges

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

4 Comments

margherita pizza Over a year ago

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)

connexo Over a year ago

You an always remove the last one using uploadFieldCount--.

Ruslan Over a year ago

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.

connexo Over a year ago

@Ruslan Though this is only a requirement if using v-for on components, it does not hurt adding it. Done.

Collectives™ on Stack Overflow

Vue JS rendering HTML elements

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related