Vueでdivを動的にレンダリングする方法は？

Question

私のページにボタンを追加したい。そのボタンをクリックすると、上の写真が追加できるdivが生成されます。私たちが2回クリックすると、2つのdivsなどがあります。問題は、私のコードが生成されていないということです。これをどのように達成できますか？

そして別の質問です。別のdivを追加する際に、どのようにIDに+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

あなたがindex VARを持つことができDIVする+1を追加するには、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>