[Vuejs]-How to render div's dynamically in Vue?

by

0👍

To add +1 to div you can have index var in v-for:

<div class="row" v-for="(row, index) in rows">

And your code just works perfect if remove photo component, are you sure that you dont have any errors in console?

var vm = new Vue({
el:'#app',
  data: {
  rows: []
  },
  methods:{
  addRow: function(){
                 this.rows.push({photo: ""});
                }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js">
</script>
<div id=app>
 <div :id="'photo'+index" class="row" v-for="(row,index) in rows">
                        <div class="col-3">
                           {{row.photo+index}}
                        </div>
                    </div>
                    <button type="button" class="button btn-primary" 
@click="addRow">Add row</button>
</div>

Leave a comment