0xD34F

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

data: () => ({
  items: [
    { show: true, ... },
    { show: true, ... },
    ...
  ],
}),

<template v-for="(n, i) in items">
  <button @click="n.show = !n.show">{{ n.show ? 'hide' : 'open' }}</button>
  <div class="list" v-show="n.show">
    ...
  </div>
  <hr v-if="i !== items.length - 1">
</template>

https://jsfiddle.net/ra5byco9/

UPD. Вынесено из комментариев:

С v-for я знаю как, а без него никак?

Дело не в v-for, а в том, что состояние каждого скрываемого-показываемого элемента должно управляться отдельным свойством. Можно его, свойство, сделать частью компонента, отвечающего за демонстрацию пары кнопка-контент. Дальше можете создавать столько экземпляров, сколько потребуется.

$('#search').on('input', function() {
  const val = this.value.toLowerCase();

  $('table tbody tr')
    .hide()
    .filter((i, tr) => $('td', tr).get().some(td => td.innerText.toLowerCase().includes(val)))
    .show();
});

function addChildrenIds(&$arr) {
  $ids = [];

  if (is_array($arr)) {
    foreach ($arr as &$n) {
      $n['childrenIds'] = addChildrenIds($n['children']);
      array_push($ids, $n['id'], ...$n['childrenIds']);
    }
  }

  return $ids;
}

Потому что по умолчанию v-model слушает событие input.

Замените change на input, или укажите change в настройках model.

document.querySelectorAll('.row').forEach(addClass);

// или

for (const n of document.getElementsByClassName('row')) {
  addClass(n);
}

Как выглядит функция addClass? Зависит от того, что вам нужно. Есть разные варианты:

• Если добавляемый класс всегда содержит количество дочерних элементов:
  
  

  const addClass = el => el.classList.add(`row-${el.children.length}`);

  
  
• Если добавлять класс надо не всегда и имя может быть произвольным, тогда можно сделать объект, где ключами будут количества дочерних элементов, а значениями - соответствующие классы:
  
  

  const classes = {
    3: 'row-3',
    5: 'row-5',
    7: 'row-xxx',
  };
  
  function addClass(el) {
    const className = classes[el.children.length];
    if (className) {
      el.classList.add(className);
    }
  }

  
  
• Если класс должен добавляться когда количество дочерних элементов попадает в некоторый интервал, то складываем в массив пары из классов и верхних границ соответствующих интервалов:
  
  

  const classes = [
    { max:        3, name: 'row-0-3' },
    { max:        5, name:        '' }, // если дочерних элементов 4 или 5, класс не добавляется
    { max:        7, name: 'row-6-7' },
    { max: Infinity, name: 'row-7-x' },
  ];
  
  function addClass(el) {
    const { name } = classes.find(n => n.max >= el.children.length) ?? {};
    if (name) {
      el.classList.add(name);
    }
  }

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

  const classes = [
    [ c => c < 5,          'row-0-4' ],
    [ c => c % 2,          'row-odd' ],
    [ c => 6 < c && c < 9, 'row-7-8' ],
  ];
  
  const addClass = ({ classList, children: { length } }) =>
    classList.add(...classes.reduce((acc, n) => (
      n[0](length) && acc.push(n[1]),
      acc
    ), []));

  
  

$('.entry__arrow--increment, .entry__arrow--decrement').click(function() {
  const $this = $(this);

  $this.closest('.entry__box').find('.entry__data').text(function(i, text) {
    const { step, max, min } = this.dataset;

    let newVal = +text + step * ($this.hasClass('entry__arrow--increment') ? 1 : -1);
    if (newVal > max) {
      newVal = min;
    } else if (newVal < min) {
      newVal = max;
    }

    return `${newVal}`.padStart(2, 0);
  });
});

const li = document.querySelectorAll('li');
li.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  e.preventDefault();
  li.forEach(n => n.classList.toggle('active', n === this));
  const href = this.querySelector('a').getAttribute('href');
  document.querySelector(href).scrollIntoView({
    behavior: 'smooth',
  });
}

Где элементы находятся, во что и по сколько надо оборачивать:

const parent = document.querySelector('.team');
const wrapperTag = 'div';
const wrapperClass = 'new';
const wrapSize = 2;

Оборачиваем:

parent.querySelectorAll(':scope > *').forEach((n, i) => {
  if (!(i % wrapSize)) {
    parent.appendChild(document.createElement(wrapperTag));
    parent.lastChild.classList.add(wrapperClass);
  }

  parent.lastChild.appendChild(n);
});

или

parent.append(...Array.from(
  { length: Math.ceil(parent.children.length / wrapSize) },
  () => {
    const wrapper = document.createElement(wrapperTag);
    wrapper.className = wrapperClass;
    wrapper.append(...Array.prototype.slice.call(parent.children, 0, wrapSize));
    return wrapper;
  }
));

number_format

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

Второй - более короткая запись третьего.

Почему у вас одинаковый класс назначен ссылке и картинке?

Не надо никакого обработчика клика, сразу вызывайте fancybox для ссылки: $('a').fancybox();.

print('\n'.join(map(' = '.join, zip(f, s))))

promisify

О каких элементах идёт речь, какое количество символов у них внутри должно оказаться, и какой текст надо вставить:

const elements = document.querySelectorAll('p');
const max = 20;
const text = 'hello, world!!';

Перебираем элементы, суммируем длины их содержимого, по достижении заданного значения вставляем текст:

let len = 0;

for (const n of elements) {
  len += n.innerText.length;
  if (len >= max) {
    n.parentNode.insertBefore(new Text(text), n.nextSibling);
    // или
    n.outerHTML += text;

    break;
  }
}

или

const el = Array.prototype.find.call(elements, function(n) {
  return (this[0] += n.textContent.length) >= max;
}, [ 0 ]);

el?.after(text);
// или
el && el.insertAdjacentText('afterend', text);

Очевидно же - свойство dt. Умножаете на 1000, засовываете в конструктор Date - получаете дату.

function tableString(arr, numCols, colSpacing = 3) {
  const numRows = Math.ceil(arr.length / numCols);
  const rows = Array.from(
    { length: numRows },
    (n, i) => arr.slice(i * numCols, (i + 1) * numCols)
  );
  const widths = Array.from(
    { length: numCols },
    (n, i) => Math.max(...rows.map(m => (m[i] ?? '').length))
  );

  return rows
    .map(n => n.map((m, i) => m.padEnd(colSpacing + widths[i], ' ')).join(''))
    .join('\n');
}


const arr = [
  '11111', '22222222', '33333333', '444', '11', '222', '3333',
  '4444444', '11111111', '222222', '33333333', '4', '1',
  '2222222222', '3', '44444444444444',
];

console.log(tableString(arr, 4));
console.log(tableString(arr, 3));
console.log(tableString(arr, 3, 8));

re.sub(r'(?<=[a-z])(?=[A-Z])', '. ', var)

При вычислении totalTon ищите выбранный option по его значению:

totalTon() {
  return this.number * this.options.find(n => n.value === this.selected).ton;
},

Или вместо :value="option.value" сделайте :value="option".

Тогда вычисляемые свойства примут следующий вид:

total() {
  return this.number * this.selected.value;
},
totalTon() {
  return this.number * this.selected.ton;
},

Ну и дефолтное значение selected в этом случае тоже придётся поправить.

То есть, вместо того, чтобы изначально не пытаться показывать то, чего нет, вы хотите заметать мусор под ковёр.

Умно, ничего не скажешь.

decodeURIComponent