Question

我想在我的页面上添加按钮。当我们点击该按钮时，上面会生成我们可以添加照片的div。当我们点击两次时，我们有两个div等。问题是我的代码没有生成......我怎么能实现这个？

另一个问题。如何在添加另一个div时为标识符添加+1？

<div class="row" v-for="row in rows">
    <div class="col-3">
        <photo :upload_url="" :parent="this" identifier="image01" :value="row.photo">
        </photo>
    </div>
</div>
<button type="button" class="button btn-primary" @click="addRow">Add row</button>


addRow: function(){
    this.rows.push({photo: ""});
},

Answer 1

要向div添加+1，您可以在v-for中使用index var：

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

如果删除photo组件，您的代码才能完美运行，您确定在控制台中没有任何错误吗？

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>

如何在Vue中动态渲染div？

1 个答案: