Как временно применить стиль к одному элементу итерацией в VueJS? - PullRequest
Новая
       45

Как временно применить стиль к одному элементу итерацией в VueJS?

1 голос
/ 20 января 2020

Я считаю, что есть лучшее объяснение того, чего я хочу достичь, поэтому, пожалуйста, не стесняйтесь редактировать.

Допустим, у меня есть меню, в котором перечислены фрукты с их ценами.

Я хочу показать прямоугольник, который будет перебирать элементы (скажем, он останавливается на каждом элементе в течение 2 секунд). Также я хотел бы временно сделать шрифт жирным шрифтом для элемента, на котором в данный момент находится прямоугольник.

Какой компонент или где мне искать в Vuetify для этого?

Исходный код Github https://github.com/tenzan/menu-ui

Меню. 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>

Приложение развернуто https://xenodochial-wing-706d39.netlify.com/

enter image description here

1 Ответ

1 голос
/ 20 января 2020

Да, можно выделить строки в последовательности

Рабочий код здесь: https://codepen.io/chansv/pen/gObQmOx

Компонент код: 

<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 код: 

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

js код: 

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);
  },
})
...