0xD34F

state: {
  opened: null,
  ...

toggleNav(state, block) {
  state.opened = state.opened === block ? null : block;
},

closeSidebarPanel(state) {
  state.opened = null;
},

isPanelOpen(state) {
  return !!state.opened;
},

<span v-if="isPanelOpen">{{ $store.state.opened.bName }}</span>

<template #default="{ block }">
  <div class="sidebar-panel-settings">
    <div class="setting-block">
      {{ block.bName }}
    </div>
  </div>
</template>

array.reduceRight((acc, n) => ({ ...n, children: [ ...n.children, acc ] }), { ...obj })

<img src={this.props.items[this.state.image].img} />

const isEmpty = [...inputs].some(n => !n.value);

// или

const isEmpty = !Array.prototype.every.call(inputs, n => n.value);

// или

let isEmpty = false;
for (const n of inputs) {
  if (!n.value) {
    isEmpty = true;
    break;
  }
}

// или

let isEmpty = false;
for (let i = -1; ++i < inputs.length && !(isEmpty = !inputs[i].value);) ;

// или

const isEmpty = (function isEmpty(i, n = inputs.item(i)) {
  return !!n && (!n.value || isEmpty(-~i));
})(0);

const grouped = Object.entries(list.reduce((acc, n) => (
  (acc[n.part] = acc[n.part] || []).push(n.title),
  acc
), {}));

document.body.insertAdjacentHTML('beforeend', grouped
  .map(([ k, v ]) => `<div>${k}</div>${v.map(n => `<div>${n}</div>`).join('')}`)
  .join('')
);

document.body.append(...grouped.flat(2).map(n => {
  const div = document.createElement('div');
  div.innerText = n;
  return div;
}));

$(ids.map(n => `[data-property-id-row="${n}"]`).join(', ')).hide();

const elems = document.querySelectorAll(ids.map(n => `[data-property-id-row="${n}"]`));
for (let i = 0; i < elems.length; i++) {
  elems[i].style.display = 'none';
}

document.querySelectorAll('.form-group').forEach(function(n) {
  n.hidden = this.has(Number(n.getAttribute('data-property-id-row')));
}, new Set(ids));

.hidden {
  display: none;
}

for (const n of document.getElementsByClassName('form-group')) {
  n.classList.toggle('hidden', ids.includes(+n.dataset.propertyIdRow));
}

<select v-model="selected">
  <option v-for="n in deliveryPrice" :value="n">{{ n.city }}</option>
</select>

<div v-if="selected">
  <div>{{ selected.city }}</div>
  <div>{{ selected.priceFrom }}</div>
</div>

<select v-model="city">
  <option v-for="n in deliveryPrice">{{ n.city }}</option>
</select>

computed: {
  selected() {
    return this.deliveryPrice.find(n => n.city === this.city);
  },
},

<select v-model="selectedIndex">
  <option v-for="(n, i) in deliveryPrice" :value="i">{{ n.city }}</option>
</select>

data: () => ({
  selectedIndex: -1,
}),

computed: {
  selected() {
    return this.deliveryPrice[this.selectedIndex];
  },
},

let index = -1;
setInterval(() => {
  index = (index + 1) % array.length;
  console.log(array[index]);
}, 500);

Показалось будет неудобно юзать в Вью компоненте. Мне надо при наведении мышки показывать по кругу картинки из массива и останавливать при убирании мышки.

<div
  @mouseenter="установитьИнтервал"
  @mouseleave="сброситьИнтервал"
>

methods: {
  установитьИнтервал() {
    this.interval = setInterval(() => { ... }, 666);
  },
  сброситьИнтервал() {
    clearInterval(this.interval);
  },
},

function App() {
  const [ values, setValues ] = useState(Array(10).fill(''));

  const onChange = ({ target: t }) => {
    const index = +t.dataset.index;
    const value = t.value;

    setValues(values.map((n, i) => i === index ? value : n));

    if (index < values.length - 1 && value) {
      inputRefs.current[index + 1].focus();
      inputRefs.current[index + 1].select();
    }
  };

  const inputRefs = useRef([]);

  return (
    <div>
      {values.map((n, i) => (
        <div>
          <input
            value={n}
            data-index={i}
            onChange={onChange}
            ref={input => inputRefs.current[i] = input}
            maxLength="1"
          />
        </div>
      ))}
    </div>
  );
}

$("#changeCityInput").bind("keyup change",

const getNestedData = (data, condition) => Object
  .values(data instanceof Object ? data : {})
  .reduce((acc, n) => (
    acc.push(...getNestedData(n, condition)),
    acc
  ), condition(data) ? [ data ] : []);


const objects = getNestedData(data, x => x && x.value > 0);

const checked = Array.from(document.querySelectorAll('.btn:checked'), n => n.value);
const filtered = arr.filter(n => checked.includes(n));

const createList = arr =>
  arr.reduceRight((acc, n) => ({
    val: n,
    next: acc,
  }), null);

function createList(arr) {
  let list = null;

  for (let i = arr.length; i--;) {
    list = {
      val: arr[i],
      next: list,
    };
  }

  return list;
}

const createList = (arr, i = 0) =>
  i < arr.length
    ? ({ val: arr[i], next: createList(arr, i + 1) })
    : null;

let slider = -1;

setInterval(() => {
  slider = (slider + 1) % $sliders.length;
  $sliders.eq(slider).slick('slickNext');
}, 1000);

• Производится попытка установить в качестве текущего слайд номер 14. Что делать? Очевидно, установить в качестве текущего четвёртый - остаток от деления изначально указанного номера на количество слайдов.
  
• Как установить минус второй (-2) слайд? - очевидно, это второй с конца, надо добавить количество слайдов, чтобы получить реальный номер.
  
• Зачем одновременно добавляется количество слайдов и берётся остаток? - чтобы один и тот же код корректно обрабатывал переходы из конца в начало и из начала в конец.
  

const WIDTH = 300;
const HEIGHT = 300;
const canvas = document.getElementById('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;

const ctx = canvas.getContext('2d');

const
  X = 100,
  Y = 100,
  A = 90,
  B = 50;

const
  N = 1000,
  SIDE = 4,
  HALF_SIDE = SIDE / 2;

const rand = (min, max) => Math.random() * (max - min) + min;

ctx.beginPath();
ctx.ellipse(X, Y, B, A, Math.PI / 2, 0, 2 * Math.PI);
ctx.stroke();

for (let i = 0; i < N; i++) {
  const
    x = rand(-A + HALF_SIDE, A - HALF_SIDE),
    maxAbsY = (B - HALF_SIDE) / A * Math.sqrt(A * A - x * x),
    y = rand(-maxAbsY, maxAbsY);

  ctx.beginPath();
  ctx.rect(x + X - HALF_SIDE, y + Y - HALF_SIDE, SIDE, SIDE);
  ctx.stroke();
}

button.addEventListener('click', () => {
  anotherButton.click();
});

button.addEventListener('click', () => {
  anotherButton.dispatchEvent(new Event('click', { bubbles: true }));
});