Vue

by Roland Doda

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="app">
  <div :class="['parent', { active: is_active }]" 
       @click="is_active = !is_active"
  >
    Click to activate 
    <i class="fa fa-trash" title="delete this" @click.stop="delete_clicked"></i>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.parent {
  width: 200px;
  height: 50px;
  border: 2px solid blue;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}

.parent.active {
  background: red;
  color: white;
}

i {
  color: blue;
}

Vue

new Vue({
  el: "#app",
  data: () => ({
  	is_active: false
  }),
 	methods: {
  	delete_clicked() {
    	alert('you clicked delete')
    }
  }
})