Add an image upload box when clicking on the add image box in vuejs

Question

<template>
<b-row>
  <b-col md="3" v-for="item in defaultData" :key="item.key">
    <b-form-group>
        <b-form-file
          accept="image/*"
          placeholder="Choose popup invalid image..."
          drop-placeholder="Drop file here..."
          :name=item.keyName
        />
    </b-form-group>
  </b-col>
  <b-col md="2">
    <a-button type="button" class="mr-2" html-type="submit" @click="addimg" ><i class="fa fa-plus" aria-hidden="true"></i></a-button>
  </b-col>
</b-row>
</template>
<script>
const defaultData = [
  {
    keyName: product-a2,
    key: 1
  }
]

export default {
  methods: {
    addimg() {
      //
    }
  }
}
</script>

I am doing image upload in vuejs.But now I am facing some unresolved problems. I want when I press @click="addimg" it will add 1 more photo upload box. Please give me your opinion. Thank you

You need to make this component and render it with v-for for every image. The "+" button will add 1 more element on the array you are using with v-for. — Abregre
– Abregre, Commented Dec 6, 2021 at 8:32

B0BBY · Accepted Answer · 2021-12-06 08:54:57Z

1

Just use in your methods this.defaultData.push({}). Each time you click on your button it will push a new content to your template.

I've added an unique ID as well, because I don't know if your "key" is unique and this will help you out in future coding.

NOTICE You can use your b-button inside of the v-for but than it will always be pushed too.

Here is how you should change your code:

<div v-for="item in defaultData" :key="item.id">
  <!-- ALL OF YOUR DATA IN HERE -->
</div>

<b-button></b-button>

methods: {
  addimg() {
    this.defaultData.push({
      id: this.id += 1;
    })
  }
}

data() {
  return {
    id: null, 
    defaultData: [   //this is your first "defaultData" in your template 
      { id: 0 } 
    ]
  }
}

Hopefully this helps you out! Pls let me know!

answered Dec 6, 2021 at 8:54

B0BBY

1,1192 gold badges13 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

Add an image upload box when clicking on the add image box in vuejs

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