stanislavkm

const array = ['part1-item1', 'part1-item2', 'part2-item1', 'part3-item1'];

const result = array.reduce((acc, rec) => {
  const [part, item] = rec.split('-');
  if (!acc[part]) {
    acc[part] = [item];
  } else {
    acc[part].push(item);
  }
  return acc;
}, {});

Сделай 4 инпута, при вводе в него цифры переключай на следующий инпут и тд..
Вообще примеров полно, можешь на codepen поискать что нить по запросу "pin code"
https://codepen.io/rehhouari/pen/PoWVEKW
https://codepen.io/danielsintrao/pen/KWozJd
https://codepen.io/VadimMalykhin/pen/qPVvop

align-items: flex-start;

Полное руководство по Flexbox

Можно сделать фильтр, метод или вычисляемое свойство:

data: () => ({
  values: [ 0, 14235534, 53423, -9678953, 3451, 5323467445, -123456 ],
}),
filters: {
  format1: val => `${val}`.replace(/\d(?=(\d{3})+$)/g, '$& '),
},
methods: {
  format2: val => val.toLocaleString('ru-RU'),
},
computed: {
  formatted() {
    return this.values.map(n => {
      const sign = Math.sign(n) === -1;
      const arr = [...String(Math.abs(n))].reverse();
      return (sign ? '-' : '') + Array.from(
        { length: Math.ceil(arr.length / 3) },
        (n, i) => arr.slice(i * 3, (i + 1) * 3).reverse().join('')
      ).reverse().join(' ');
    });
  },
},

<div>
  <div v-for="n in values">{{ n | format1 }}</div>
</div>
<div>
  <div v-for="n in values">{{ format2(n) }}</div>
</div>
<pre>{{ formatted }}</pre>

https://jsfiddle.net/3qg792sr/

Потому что у тебя ошибка вычисления выражения desktop - news__post - wrapper и m - t_1, о чем он с примерно 99% вероятностью ругается в консоли. Добавь кавычки, чтобы были строки с названием класса. А вообще в твоем случае можно использовать совместно

class="тут классы, применяемые всегда" :class="тут динамическая часть"

Поздно, конечно, но вот моё найденное решение:
Дописывать к каждой команде docker фразу "docker-machine ssh default"
Например:

docker-machine ssh default docker run -it imageName

Вот

export default {
  data() {
    return {
      dateNow: new Date(),
      timerId: null
    };
  },
  mounted() {
    this.timerId = setInterval(() => {
      this.dateNow = new Date();
    }, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timerId);
  }
};

Или так

import {ref, onUnmounted} from "vue";

const dateNow = ref(new Date());
const timerId = setInterval(() => {
  dateNow.value = new Date();
}, 1000);

onUnmounted(() => {
  clearInterval(timerId);
});

мой телепат подсказывает что это vue и там наверху в шаблоне что-то типа
<tr v-for="(item, index) in $store.state.items">
так что должно сработать
console.log(this.$store.state.items[index])

да и вообще можно поменять макет и в функцию прям item передавать а не искать и не получать ничего по индексу, а также воспользоваться хелперами, чтобы в стор не лезть через 100500 точек за данными

data(){
  return{
    Item: {
      ...

v-model="item.name"

Ну и как там у вас имя свойства начинается - с большой буквы или маленькой? Вы определитесь.

ADD_TO_PRODUCTS({commit}, item){
    commit('SET_PRODUCT_TO_STATE', item)
},

methods:{
  ...mapActions([
      'ADD_TO_PRODUCTS',
  ]),

@click="ADD_TO_PRODUCTS"

В экшене ожидается параметр, но вы ничего не передаёте. Точнее, не передаёте в явном виде - передаётся объект события клика. А надо item (Item?).

После того, как исправите косяки выше, у вас, вероятно, вылезет ещё один. С ним разбираться будете здесь.

watch: {
  переменная: {
    immediate: true,
    handler(val) {
      document.body.classList.toggle('класс', val);
    },
  },
},

:href="#`${title}`"

Через computed свойство

<template>
  <header :class="pageClass">
...
  </header>
      <router-view/>
  <footer :class="pageClass">
...
  </footer>
</template>

<script>
export default {
  computed: {
    pageClass() {
      return {
        'page-class': this.$route.path === '/page',
      }
    }
  }
}
</script>