title: select/deselect single element in v-for
body: <p>I'm trying to make an option list with <code>v-for</code>, where you can choose only one option at a time. It works great except I can't unselect the option.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="main"&gt;
    &lt;ul&gt;
      &lt;li 
          v-for="l in list" 
          id="l.key"
          @click="selectone(l.key, l.isSelected)"
          v-bind:class="{ selected : l.isSelected, notselected : !l.isSelected }"
          &gt; {{ l.tec }} &lt;/li&gt;
     &lt;ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The JS</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>new Vue({
    el:"#main",
    data: {
      list: [
        {key:"0", tec:"html", isSelected:false},
        {key:"1", tec:"css", isSelected:false},
        {key:"2", tec:"JS", isSelected:false},
        {key:"3", tec:"Git", isSelected:false},
        {key:"4", tec:"NodeJS", isSelected:false},
        {key:"5", tec:"Postgres", isSelected:false}
      ]
    },
    methods: {
      selectone: function(k, o) {
        for( i = 0; i &lt; this.list.length; i ++ ) {
          if(this.list[i].isSelected == true ) {
            this.list[i].isSelected = false
          }
        }
        this.list[k].isSelected = !this.list[k].isSelected;
      }
    }
  })
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.selected {
      background:lightpink;
  }
  .notselected {
      background:lightblue;
  }
  </code></pre>
  
  <p>Shouldn't my loop deactivate all options every time I click an element?</p>