How to temporarily apply a style to one item by iteration in VueJS?

Question

I believe there is a better explanation of what I'm wanting to achieve, so please free to edit.

Let's say I have a menu that lists fruits with their prices.

I want to show a rectangle that will iterate through items (let's say it stops on each item for 2 seconds). Also I would like to temporarily make font bold of an item currently having a rectangle on it.

Which component or where should I look in Vuetify for this?

Github source code https://github.com/tenzan/menu-ui

Menu.vue

<template>
  <v-simple-table>
    <template v-slot:default>
      <tbody>
        <tr v-for="item in menuItems" :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
        </tr>
      </tbody>
    </template>
  </v-simple-table>
</template>

<script>
export default {
  data() {
    return {
      menuItems: {
        1: {
          name: "Apple",
          price: 20
        },
        2: {
          name: "Orange",
          price: 21
        },
        3: {
          name: "Pear",
          price: 22
        },
        4: {
          name: "Grape",
          price: 23
        }
      }
    };
  }
};
</script>

App deployed https://xenodochial-wing-706d39.netlify.com/

Answer 1

Yes, it is possible to highlight the rows in a sequence

Working codepen here: https://codepen.io/chansv/pen/gObQmOx

Component code:

<div id="app">
  <v-app id="inspire">
    <v-simple-table>
      <template v-slot:default>
        <tbody>
          <tr v-for="item in desserts" :key="item.name" :class="item.highlight ? 'highlight' : ''">
            <td>{{ item.name }}</td>
            <td>{{ item.calories }}</td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
  </v-app>
</div>

css code:

.highlight{
    background-color: grey;
    font-weight: 900;
}

js code:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
        },
        {
          name: 'Eclair',
          calories: 262,
        },
        {
          name: 'Cupcake',
          calories: 305,
        },
        {
          name: 'Gingerbread',
          calories: 356,
        },
        {
          name: 'Jelly bean',
          calories: 375,
        },
        {
          name: 'Lollipop',
          calories: 392,
        },
        {
          name: 'Honeycomb',
          calories: 408,
        },
        {
          name: 'Donut',
          calories: 452,
        },
        {
          name: 'KitKat',
          calories: 518,
        },
      ],
    }
  },
  created() {
    var self = this;
    self.desserts.map((x, i) => {
      self.$set(self.desserts[i], "highlight", false);
    });
    var init = 0;
    setInterval(function(){ 
      if(init === self.desserts.length) { 
        init = 0; 
      }
      self.desserts[init].highlight = true;
      if (init === 0) {
        self.desserts[self.desserts.length - 1].highlight = false;
      } else  {
        self.desserts[init - 1].highlight = false;
      }
      init++;
    }, 2000);
    console.log(self.desserts);
  },
})