Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="row in rows">
        {{row | json}}     <button @click="toggleRow(row)">Toggle</button>
      </li>
    </ul>
        Selected Rows: {{selectedRows | json}}    
  </div>
</body>
</html>
 
window.onload = function () {
    Vue.config.debug = true;
    new Vue({
      el: '#app',
      data: {
        rows: [
          {id: 1, a: true, b: false},
          {id: 2, a: false, b: false},          
          {id: 3, a: false, b: true}          
        ],
        selectedRows: {}
      },
      methods: {
        toggleRow: function(row) {
          key = row.id
          if (this.selectedRows[key]) {
            console.log('deleteRow: ', key)
            this.$delete('selectedRows[' + key + ']')
          }
          else {
            this.$set('selectedRows[' + key + ']', row)
          }   
        }
      }
    });
    
};
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers