Как поменять место элемента из списка?

Как сделать так ,чтобы первый элемент из списка начиналcя снизу, а не сверху блока ?

const app = new Vue({
  el: '#app',
  data() {
    return {
      showInput: true, // Отвечает за показ ввода текста
      showChat: true, // Отвечает за показ нашего чата
      chatMessages: [], // список сообщений в чате
      pastMsgchat: [], 
      inputText: '', // Тут хранится наш текст, который мы вводим в инпут
      active: true, // Отвечает за возможность писать в чат,
    }
  },
  methods: {
    push(msg) {
      if (this.chatMessages.length >= 50) {
        this.chatMessages.pop();
      } 
      let valueback = 'chat__mesage';
      let valueicon = null;
      let valuesizeicon = null;
      switch (msg.substring(0, 4)) {
        case '[00]': 
          msg = msg.substr(4);
          break;
        case '[01]':
          valueicon = 'img/iconme.svg';
          valuesizeicon = 'iconme';
          msg = msg.substr(4);
          break;
        case '[02]':
          valueicon = 'img/iconDO.svg';
          valuesizeicon = 'icondo';
          msg = msg.substr(4);
          break;
        case '[03]':
          valueicon = 'img/iconTRY.svg';
          valuesizeicon = 'icontry';
          msg = msg.substr(4);
          break;
        case '[04]':
          valueicon = 'img/iconOOC.svg';
          valuesizeicon = 'iconooc';
          msg = msg.substr(4);
          break;
        case '[05]':
          valueback = 'chat__mesage-info';
          valueicon = 'img/iconINFO.svg';
          valuesizeicon = 'iconinfo';
          msg = msg.substr(4);
          break;
        case '[06]':
          valueback = 'chat__mesage-ban';
          valueicon = 'img/iconBAN.svg';
          valuesizeicon = 'iconban';
          msg = msg.substr(4);
          break;
        case '[07]':
          valueback = 'chat__mesage-warn';
          valueicon = 'img/iconWARN.svg';
          valuesizeicon = 'iconwarn';
          msg = msg.substr(4);
          break;
        case '[08]':
          valueback = 'chat__mesage-admin';
          valueicon = 'img/iconADMIN.svg';
          valuesizeicon = 'iconadmin';
          msg = msg.substr(4);
          break;
        case '[09]':
          valueback = 'chat__mesage-news';
          valueicon = 'img/iconNEWS.svg';
          valuesizeicon = 'iconnews';
          msg = msg.substr(4);
          break;
        case '[10]':
          valueback = 'chat__mesage-organization';
          valueicon = 'img/iconORGANIZATION.svg';
          valuesizeicon = 'iconorganization';
          msg = msg.substr(4);
          break;
        case '[11]':
          valueback = 'chat__mesage-state';
          valueicon = 'img/iconSTATE.svg';
          valuesizeicon = 'iconstate';
          msg = msg.substr(4);
          break;
        case '[12]':
          valueback = 'chat__mesage-leader';
          valueicon = 'img/iconLEADER.svg';
          valuesizeicon = 'iconleader';
          msg = msg.substr(4);
          break;
        case '[13]':
          valueback = 'chat__mesage-adminchat';
          valueicon = 'img/iconADMINchat.svg';
          valuesizeicon = 'iconadminchat';
          msg = msg.substr(4);
          break;
          default:
          break;
      }
      let value = {text: msg, back: valueback, icon: valueicon, sizeicon: valuesizeicon};
      this.chatMessages.unshift(value);
    },
    // показать / убрать интуп ввода текста
    enableChatInput(enable) {
      if (!this.active && enable) {
        return;
      }

      if (enable !== this.showInput) {
        mp.invoke("focus", enable);
        mp.invoke("setTypingInChatState", enable);

        this.showInput = enable;
        this.inputText = '';
        enable && this.$nextTick().then(() => this.$refs.input.focus());
      }
    },
    // включить / отключить возможность писать в чат
    activate(toggle) {
      if (!toggle && this.showInput) {
        alert('удалить')
        this.enableChatInput(false);
      }
      this.active = toggle;
    },
        // показать / скрыть чат
    show(toggle) {
      if (!toggle && this.showInput) {
        this.enableChatInput(false);
      }
      this.showChat = toggle;
    }
  },
  // тут можно запушить в чат и посмотреть 
  mounted() {
      // Включаем чат
    this.showChat = true;
    this.push("past message");
    this.push("hellow");
  }
 });
body {
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

body, html {
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 0;
}

.chat {
   width: 500px;
   margin-left: 14px;
   margin-top: 16px;
}

.chat__allmesages {
   width: 100%;
   height: 315px;
   margin-bottom: 10px;
   list-style-type: none;
   overflow: auto;
   justify-content: start;

}

.chat__mesage {
   margin-right: auto;
   background: rgba(0, 0, 0, 0.4);
   border-radius: get-vh(8px);
   padding: get-vh(4px) get-vh(6px) get-vh(4px) get-vh(5px);
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 600;
   font-size: get-vh(15px);
   line-height: get-vh(21px);
   color: #FFFFFF;
   width: fit-content;
   margin-top: get-vh(5px);
   word-break: break-word;
   word-wrap: break-word;
   overflow-wrap: break-word;
}

.chat__msg {
   width: 500px;
   height: 30px;
   background: rgba(0, 0, 0, 0.6);
   border-radius: 10px;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 600;
   font-size: 15px;
   line-height: 18px;
   display: flex;
   align-items: center;
   color: #FFFFFF;
   padding-left: 10px;
   padding-right: 30px;
   position: absolute;
   top: 341px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="wrapper" id="app">
      <div v-if="showChat" class="chat">
         <ul class="chat__allmesages">
            <li v-for="message in chatMessages" :class="message.back">
               <p><img :src="message.icon" :class="message.sizeicon">{{ message.text }}</p>
            </li>
         </ul>
         <input v-show="showInput" v-model="inputText" :maxlength="max" class="chat__msg" type="text" ref="myInput" spellcheck="false"
         @input="(e) => {
            switch(e.target.value){
               case '/o ':
                  e.target.value = '';
                  curenttype = '/o ';
                  activeLink = 2;
                  break;
               case '/st ':
                  e.target.value = '';
                  curenttype = '/st ';
                  activeLink = 3;
                  break;
               case '/led ':
                  e.target.value = '';
                  curenttype = '/led ';
                  activeLink = 4;
                  break;
               case '/a ':
                  e.target.value = '';
                  curenttype = '/a ';
                  activeLink = 5;
                  break;
               case '/me ':
                  e.target.value = '';
                  curenttype = '/me ';
                  activeLink = 6;
                  break;
               case '/do ':
                  e.target.value = '';
                  curenttype = '/do ';
                  activeLink = 7;
                  break;
               case '/try ':
                  e.target.value = '';
                  curenttype = '/try ';
                  activeLink = 8;
                  break;
               case '/f ':
                  e.target.value = '';
                  curenttype = '/f ';
                  activeLink = 9;
                  break;
               case '/admin ':
                  e.target.value = '';
                  curenttype = '/admin ';
                  activeLink = 10;
                  break;
            }
            inputText = e.target.value;
         }">
      </div>
   </div>


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

Автор решения: SwaD

Комментарии пока писать не могу, поэтому сразу тут.
Единственный список, который я нашел, это список сообщений чата.

Код рендера здесь не представлен, поэтому предположу, что надо строку

this.chatMessages.push(value);

заменить на

this.chatMessages.unshift(value);

Тогда будут добавляться новые сообщения в начало, а старые удаляться с конца

→ Ссылка