title: vue.js: Tracking currently selected row
body: <p>I have a simple table where I would like to handle click elements:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row"
       v-bind:class="{selected: isSelected}"
       v-for="scanner in scanners"
       v-on:click="scannerFilter"&gt;
  
      {{scanner.id}} ...
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre class="lang-js prettyprint-override"><code>    new Vue({
          el: "#checkInScannersHolder",
          data: {
              scanners: [],
              loading: true
          },
          methods: {
              scannerFilter: function(event) {
                  // isSelected for current row
                  this.isSelected = true;
                  // unselecting all other rows?
              }
          }
      });
  </code></pre>
  
  <p>My problem is unselecting all other rows when some row is clicked and selected.</p>
  
  <p>Also, I would be interested to know, it it is possible accessing the <code>scanner</code> via some variable of the callback function instead of using <code>this</code> as I might need to access the current context.</p>