如何在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？

回答

相關問題