JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>

<div id="app">
  <i :class="value"> </i>
  {{ value }}
  <button @click="change(this)"> change </button>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    value: 'far fa-thumbs-up'
  },
  methods: {
    change() {
   	let el = document.getElementsByClassName('svg-inline--fa')[0]
    let elIcoData = el.dataset.icon
    elIcoData === 'thumbs-up' ? elIcoData = 'thumbs-down' : elIcoData = 'thumbs-up'
    document.getElementsByClassName('svg-inline--fa')[0].dataset.icon = elIcoData
    }
    
  }
})