Айнур Ярулин

Можно. Сделать все за кулисами. Но такое редко нужно.

В vue 3 scoped slots объединили в slots.
Теперь нужно писать $slots вместо $scopedSlots.

https://v3.vuejs.org/guide/migration/slots-unifica...

this.$scopedSlots

Если данные влезают в оперативку, то ещё можно посмотреть в сторону Tarantool, Reindexer или RediSearch.
Кстати Redis так же пригодится и для хранения сессий.
Вообще Elasticsearch установить и подключить легко, а вот поддерживать в рабочем состоянии сложно.

Гуглить по запросу "фасетный поиск". Обычно эту функции выполняет движок полнотекстового поиска, который делает первый пункт за вас.

На сколько много должно быть товаров или можно сделать только страницу с телефонами?

Чем больше, тем лучше.

2. Где взять базу данных смартфонов? Или можно добавить вручную 5-6 телефонов и всё?

Поднять базу данных на Firebase, и делать запросы к ней

3. Должен ли работать фильтр товаров или можно оставить его нерабочим?

Должен, а вместе с ним пагинация, фильтрация, поиск и прочие фичи. Плюс сохранения данных при перезагрузке, lazy-loading и прочее.

https://ru.vuejs.org/v2/api/#inheritAttrs

через render-функцию

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

код же можно изменить под vue 3, да?

да

Можно получать цвета пикселей с помощью canvas. Картинки должны быть с того же домена, что и страница.

Можно получить цвет всего 1 пикселя и на том успокоиться. Или же пройтись по всем 4 краям картинки и взять наиболее часто встречающийся цвет.

function getPixel(url, x, y) {
  var img = new Image();
  img.src = url;
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  context.drawImage(img, 0, 0);
  return context.getImageData(x, y, 1, 1).data;
}

sliding-up panel.
А вот эта полосочка - это способ визуально показать, что за неё можно потянуть.
Она имитирует аналогичную выемку на объектах реального мира.
Увидеть её можно, например, на крышках разных пультов, которые надо сдвигать в сторону, чтобы открыть.

А вот название я не нашёл. Думаю, в разговоре её все называют полосочкой или выемкой.

Нет способа уcловной установки ключа объекта при инициализации объекта
Можно только так:

if (A == B) {
 obj.active = true
}

function renderTemplate() {
  const unsafeHTML = document.createRange().createContextualFragment(`
    <main>
      <b>Bold text</b>
      <script>
        console.log("text")
      </script> 
    </main>
  `);

  return unsafeHTML;
}

document.body.appendChild(renderTemplate());

document.body.innerHTML = renderTemplate();


function renderTemplate() {
  const div = document.createElement("div")
  div.textContent = "Очень важный блок"

  return '<main class="container">'+ div.outerHTML +'<div>Какая-то другая разметка</div></main>';
}

Делаем просто:

const result = arr.reduce((acc, n, i) => (
  (i & 1) || acc.push(0),
  acc[~-acc.length] += n,
  acc
), []);

Делаем сложно:

function chunked(data, chunkSize) {
  return Array.prototype.reduce.call(
    data,
    (acc, n, i) => ((acc[i / chunkSize | 0] ??= []).push(n), acc),
    []
  );
}

function sum(data, val = n => n) {
  const getVal = val instanceof Function ? val : n => n[val];
  return Array.prototype.reduce.call(
    data,
    (acc, n) => acc + getVal(n),
    0
  );
}


const result = chunked(arr, 2).map(n => sum(n));

javascript это язык программирования, это тебе не препроцессор, если хочешь ускорить и укоротить свой js код, юзай jquery, а лучше смерись с тем, что тебе там не нравится в нем, это глупо с моей точки зрения и советую все же использовать чистый js, а то jquery постепенно умирает среди разработчиков, кстати в новом синтаксисе js, можно не ставить в конце точку с запятой, при условии, что ты свой js на выходе минифицировать не будешь, да и стрелочные функции никто не отменял, вообщем и сам синтаксис javascript прогрессирует в лучшую сторону, короче говоря, я не в курсе какую версию js ты учишь, но учи от ES6 версии, там много нововведений касаемо синтаксиса javascript

Посмотрите на ReasonML и Fable
CoffeScript полумёртвый.

CoffeScript

У этих ребят есть что-то похожее
ТЫЦ

Нет. Никак. Если нужен выход из цикла до полного прохода, нужно использовать фор.
Впрочем, судя по всему ты хочешь сделать пагинатор, поэтому лучше загугли как их делают другие.

Остановить итерацию в методе map никак.
Можно найти индекс нужного элемента с помощью метода findIndex() и обрезать массив относительно него.
Только стоит учесть, что искомого элемента может не быть в массиве, и тогда findIndex() вернет -1

const arr = [
  {value: 1},
  {value: 2},
  {value: 3},
  {value: 4, active: true},
  {value: 0},
  {value: 0},
  {value: 0},
  {value: 0},
  {value: 0},
]

const activeIndex = arr.findIndex(item => item.active);
wrapper.innerHTML = (activeIndex === -1 ? arr : arr.slice(0, activeIndex + 3)).map(item => `
  <div class="block ${item.active ? "active" : ""}">
    ${item.value}
  </div>
`).join("")