0xD34F

SuggestView

есть демо

function getGridSize() {
  const w = window.innerWidth;
  return [ 500, 700, 1225, Infinity ].findIndex(n => n > w) + 1;
}

Или

function getGridSize() {
  const w = window.innerWidth;
  return [
    { size: 1, maxWidth: 500 },
    { size: 2, maxWidth: 700 },
    { size: 3, maxWidth: 1225 },
    { size: 4, maxWidth: Infinity },
  ].find(n => n.maxWidth > w).size;
}

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

const isEqual = (a, b) =>
  a.length === b.length && a.every((n, i) => Object.is(n, b[i]));

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

const includes = (arrs, search) =>
  arrs.some(n => isEqual(n, search));

Всё: console.log(includes(array, [ 21, 81 ]));.

el.dispatchEvent(new Event('click'));

// или, если обработчик клика висит не на самом svg, а выше
el.dispatchEvent(new Event('click', { bubbles: true }));

погуглил за вас

Массив цветов - вместо строк пусть будут объекты, содержащие два свойства, цвет и url картинки:

const colors = [
  { color: '...', image: '...' },
  { color: '...', image: '...' },
  ...
];

Рендеринг палитры - заменяете background-color на background-image:

const colorsItems = colors
  .map(n => `
    <button
      style="background-image: url(${n.image})"
      class="palette-button"
      data-color="${n.color}"
    ></button>`)
  .join('');

Стилизация .palette-button - приводите в порядок background:

background-position: center;
background-size: contain;
background-repeat: no-repeat;

jsfiddle.net/6jwafb1m

Складываете в массив объектов координаты маркеров и контент для всплывающего окна:

const markerData = [
  { coord: [ ... ], content: '...' },
  { coord: [ ... ], content: '...' },
  ...
];

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

markerData.forEach(function(n) {
  const marker = new google.maps.Marker({
    position: new google.maps.LatLng(...n.coord),
    map,
  });

  marker.addListener('click', function() {
    infowindow.setContent(n.content);
    infowindow.open(map, marker);
  });
});

Всё.

Во-первых - сложите значения фильтров в отдельный объект, не надо делать их свойствами непосредственно стейта.

Во-вторых:

const filterByProps = Object.entries(this.state.filters).filter(n => n[1]).map(n => n[0]);
const filteredItems = this.state.items.filter(n => filterByProps.every(m => n[m]));

Повесить обработчики событий mouseenter/mouseleave, менять в них данные, от которых зависит состояние элементов. Например.

Туда: $val * 100.

Обратно: number_format($val / 100, 2, '.', '').

$sql = "{$action} * FROM {$table} WHERE {$field} {$operator} ?";

То есть, вы пытаетесь выполнить DELETE * FROM .... Круто. Не знал, что так можно. Или всё-таки нельзя?

str.gsub(/\bmy\b/, 'me')

key = lambda item: (item[0], item[3])
keys = set(map(key, list_in))
list_out = [ [ k[0], sum(int(n[2]) for n in list_in if k == key(n)), k[1] ] for k in keys ]

Приведите в соответствие имена select'ов и data-атрибутов (name="delivery", data-post - пусть оба будут или delivery, или post). Сделайте пустыми строками значения option'ов, которые соответствуют всем вариантам.

$('.result-btn').on('click', function() {
  const values = $('select')
    .get()
    .filter(n => n.value)
    .map(n => [ n.name, n.value.toLowerCase() ]);

  $('.delivery-table-item')
    .show()
    .filter((i, { dataset: d }) => values.some(([ k, v ]) => d[k].toLowerCase() !== v))
    .hide();
});

const fd = Object.entries(data).reduce((fd, n) => (fd.append(...n), fd), new FormData);

<input @cut.prevent @copy.prevent @paste.prevent>

nextTick + вызов дополнительного reflow путём обращения к одному из свойств анимируемого элемента.

Или назначайте анимируемому элементу key, и изменяйте его когда анимацию надо перезапустить (свойство isAnim в этом случае не нужно).

Или делайте анимацию бесконечной, и чтобы длительность совпадала с интервалом, по которому уменьшаете number. Класс с анимацией назначается в случае, если number ещё есть куда уменьшать.

Если бы вы составили себе труд ознакомиться с описанием метода filter, то знали бы, что он

создаёт новый массив со всеми значениями, для которых функция callback вернула значение, которое может быть приведено к true

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

Документации есть что сказать по этому поводу.

Можно попробовать прислушаться:

data: () => ({
  links: [
    { to: '...', title: '...' },
    { to: '...', title: '...' },
    ...
  ],
}),

<ul>
  <router-link v-for="n in links" :to="n.to" v-slot="s">
    <li :class="{ active: s.isExactActive }">
      <a :href="s.href" @click="s.navigate">{{ n.title }}</a>
    </li>
  </router-link>
</ul>