Vue 2.0 Selector

by Marian Rick

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
<h1>Your favorite pet?</h1>
  <div class="wrapper">
  <div 
     class="box-holder"
     v-for="item in list">
    <div class="box" 
     
     :class="{ 'choosen': favoritePet === item.id }"
     @click="onClick(item.id)">{{ item.text }}</div>
  </div>
</div>
  <h1>Your favorite sport?</h1>
  <div class="wrapper">
    <div class="box-holder">
      <div class="box" data-value="lorem">Kricket</div>
    </div>
    <div class="box-holder">
      <div class="box" data-value="reprehenderit">Quidditch</div>
    </div>
    <div class="box-holder">
      <div class="box" data-value="odio">Polo</div>
    </div>
    <div class="box-holder">
      <div class="box" data-value="qui">Frisbee</div>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

#app {
  margin: 5%;
  font-family: sans-serif;
}

.wrapper {
  margin-left: -10px;
  margin-right: -10px;
}

.box-holder {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
  float: left;
  width:  50%;
}

.box {
  border-radius: 3px;
  border: 1px solid blue;
  height: 50px;
  width: 100%;
  padding: 10px;
}

.box:hover {
  border-color: lightblue;
}

.box.choosen {
  border-color: green;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    list: [
      {
        id: 'lorem',
        text: 'Dogs'
      },
      {
        id: 'aperiam',
        text: 'Birds'
      },
      {
        id: 'aperiam2',
        text: 'Birds2'
      },
      {
        id: 'aperiam3',
        text: 'Birds3'
      }
    ],
    favoritePet: '',
    favoriteSport: ''
  },
  methods: {
    onClick: function(id) {
      this.favoritePet = id;
    }
  }
})

// a click on .box should set its `data-value` to the regarding app `data:` variable.

// Although a click should remove all `.choosen` classes and add `.choosen` to the clicked .box