JSFiddle - React, Tailwind, and code Playground

by mizobata

HTML

<script src="https://unpkg.com/vue"></script>
<ul id="item-list">
  <li @click="handleClickRow(1)" :class="{'highlight': selected === 1}">Item1</li>
  <li @click="handleClickRow(2)" :class="{'highlight': selected === 2}">Item2</li>
  <li @click="handleClickRow(3)" :class="{'highlight': selected === 3}">Item3</li>
</ul>

CSS

.highlight {
  background-color: orange;
}

JavaScript

new Vue({
  el: '#item-list',
  data: {
    selected: null,
  },
  methods: {
    handleClickRow(itemNumber) {
      this.selected = itemNumber;
    },
  },
});