如何在Vue中动态呈现div？

我想在我的页面上添加按钮。当我们点击那个按钮时，上面会生成div，我们可以添加照片。当我们点击两次，我们有两个div等。问题是我的代码没有生成...我怎么能做到这一点？如何在Vue中动态呈现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: ""}); 
},

来源

2017-08-29 BadProgrammer

首先，你不应该需要通过'parent'因为它应该是在孩子组件作为'$ parent'访问反正。 'div'上的v模型是什么？另外，你可以显示“照片”组件的代码吗？ –

要添加+1到div的，你可以有index变种V型为：

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

来源

2017-08-29 14:57:28

如何在Vue中动态呈现div？

回答

相关问题