Пуш элементов в массив и смена цвета

Question

Столкнулся с проблемой , у меня есть три элемента в массиве, я хотел реализовать , чтобы при клике на кнопку Items, отображался первый элемент массива , а у меня выводит сразу три элемента массива, хотел чтобы новые элементы шли вниз, а старые вверх, а при нажатии на кнопку changeCollors , должен был меняться класс для блока

const app = new Vue({
  el: '#app',
  data() {
    return {
      currentElement: 0,
      value: null,
      color: 0,
      changColor: [{
          class: 'blue-color',
        },
        {
          class: 'green-color',
        },
        {
          class: 'grey-color',
        },
        {
          class: 'orange-color',
        },
        {
          class: 'red-color',
        },
      ],
      messages: []
    }
  },
  methods: {
    setElement() {
      this.currentElement = (1 + this.currentElement) % this.firstItem.length;
    },
    changeCollors() {
      this.color = (1 + this.color) % this.changColor.length;
    },
    changeItemss() {
      let timeStamp = Date.now().toLocaleString();
      this.messages.unshift({
        id: timeStamp,
        colorId: this.color,
        currentElementId: this.currentElement
      })
    },
  },
});

.first-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 8.156vh;
  width: 28.242vw;
  opacity: 0.7;
  -webkit-filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.25));
          filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.25));
  -webkit-box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(1.389vh);
          backdrop-filter: blur(1.389vh);
  border-radius: 2.389vh;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.8vh;
}

.first-item__messages__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  position: fixed;
  top: 80px;
  right: 16px;
}

.first-item__img {
  height: 5.556vh;
  width: 5.556vh;
  padding: 1.189vh 1.389vh 0 1.389vh;
}

.first-item__text {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 1.8370vh;
  line-height: 1.3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  letter-spacing: -0.05em;
  color: #FFFFFF;
  text-shadow: 0px 0.4px 4px rgba(0, 0, 0, 0.5);
  padding-top: 2.189vh;
  margin-top: 0;
}

.first-item__text.error {
  background: linear-gradient(90.49deg, #FF0000 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.first-item__text.greay {
  background: linear-gradient(90.49deg, #BBBBBB 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.first-item__progress {
  position: absolute;
  bottom: 0px;
  width: 0%;
  border-bottom: 0.512vh solid #FFFFFF;
}

.first-item {
  -webkit-animation: fadeOut 5s linear forwards;
  animation: fadeOut 5s linear forwards;
}

.first-item__progress {
  -webkit-animation: runProgress 5s linear forwards;
  animation: runProgress 5s linear forwards;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-25px);
  }
}

@-webkit-keyframes runProgress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes runProgress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.top-left {
  position: relative;
  left: 10px;
}

.top-center {
  position: relative;
  left: calc(50% - 28.242vw / 2);
}

.top-right {
  position: relative;
  left: calc(99% - 28.242vw);
}

.midle-left {
  position: relative;
  top: calc(50% - 8.156vh);
}

.midle-center {
  position: relative;
  top: calc(50% - 8.156vh);
  left: calc(50% - 28.242vw / 2);
}

.midle-right {
  position: relative;
  top: calc(50% - 8.156vh);
  left: calc(99% - 28.242vw);
}

.footer-left {
  position: relative;
  top: calc(99% - 8.156vh);
}

.footer-center {
  position: relative;
  top: calc(99% - 8.156vh);
  left: calc(50% - 28.242vw / 2);
}

.footer-right {
  position: relative;
  top: calc(99% - 8.156vh);
  left: calc(99% - 28.242vw);
}

.blue-color {
  background: linear-gradient(90.49deg, #007EFF 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.green-color {
  background: linear-gradient(90.49deg, #6FDE00 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.grey-color {
  background: linear-gradient(90.49deg, #BBBBBB 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.orange-color {
  background: linear-gradient(90.49deg, #FF6B00 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.red-color {
  background: linear-gradient(90.49deg, #FF0000 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="wraper">
    <button @click="changeCollors">Color</button>
    <button @click="changeItemss">Items</button>
    <transition-group name="fade" class="mesages__list">
      <section class="first-item" :class= "changColor[message.colorId].class" v-for="message in messages" :key="message.id">
        <p class="first-item__text">{{message.id}}</p>
        <div class="first-item__progress"></div>
      </section>
    </transition-group>
  </div>

БЛОГ НА HUSL

Пуш элементов в массив и смена цвета

Ответы (0 шт):