Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div id="app">
    
    <div
      v-for="(div, index) in divs"
      :key="div.id"
      :name="name='div'+index"
    >
      <div class="row">
        <div class="col-12">Div {{name}}</div>
      </div>
      
      <button
        class="btn btn-danger"
        @click="deleteRow(index)"
      >Delete</button>
      
    </div>
    <button
      class="btn btn-success"
      @click="addRow()"
    >Add row</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  
</body>
</html>
 
const app = new Vue({ 
  el: '#app',
  
  data() {
    return {
      name: 0,
      divs: []
    };
  },
  methods: {
    addRow() {
      this.divs.push({
        div: this.name
      });
      console.log(this.divs);
    },
    deleteRow(index) {
      this.divs.splice(index, 1);
    }
  }
  
})
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
FredHalmpro
0viewers