Задать вопрос
  • Как получать значение data-атрибута при клике на кастомные placemark'и?

    0xD34F
    @0xD34F Куратор тега Яндекс.Карты
    Не надо никаких data-атрибутов. Передавайте эти id в properties (второй параметр конструктора) placemark'ов, при клике получайте:

    e.get('target').properties.get('имяСвойстваСодержащегоId')


    Ну а что до показанного вами кода...

    • Почему в шаблоны placemark'ов зашивается id? Неужели вы до сих пор не в курсе, что id должны быть уникальны? Кстати, поэтому у вас и "выводит всегда 1" - ищите элемент по id, вот и получаете всегда первый из созданных.
    • Зачем вообще понадобилось искать элемент и читать data-атрибут, значение которого вам и так доступно внутри обработчика (shop.id)?
    • Создавать отдельный layout под каждый placemark не надо. Вынесите создание layout'а за пределы цикла. Если надо передавать в шаблон какие-то уникальные значения, то их опять же можно подтянуть из свойств. Как бы это выглядело для вашего data-атрибута:

      <div data-id="{{ properties.имяСвойстваСодержащегоId }}">

      Также не надо создавать отдельные функции, назначаемые в качестве обработчиков клика - создайте один обработчик за пределами цикла (да, достать id из shop после этого уже не получится, как было сказано в начале - передавайте его через properties).
    Ответ написан
    1 комментарий
  • Как вывести длину самого большого вложенного массива?

    0xD34F
    @0xD34F Куратор тега JavaScript
    где ошибка?

    Скобки пересчитайте. Фигурные. Сколько закрывающих, сколько открывающих.

    Ну и конечно не надо никаких циклов в явном виде:

    const maxlen = Math.max(...arr.map(n => n.length));
    
    // или
    
    const maxlen = arr.reduce((max, { length: n }) => max > n ? max : n, -Infinity);
    Ответ написан
    Комментировать
  • Как в ссылки добавить значения title?

    0xD34F
    @0xD34F Куратор тега JavaScript
    fetch('https://gorest.co.in/public/v1/posts')
      .then(r => r.json())
      .then(r => {
    
       // собираем разметку
        document.body.insertAdjacentHTML('beforeend', `
          <ul>${r.data.map(n => `
            <li>
              <a>${n.title}</a>
            </li>`).join('')}
          </ul>
        `);
    
        // или, создаём элементы напрямую
        const ul = document.createElement('ul');
        ul.append(...r.data.map(n => {
          const li = document.createElement('li');
          const a = document.createElement('a');
          a.textContent = n.title;
          li.append(a);
          return li;
        }));
        document.body.append(ul);
      });
    Ответ написан
    1 комментарий
  • Как узнать что экземпляр конкретного класса а не его прародителя?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Получаем тип данных (конструктор или само значение, если оно nullish):

    const type = x => x == null ? x : x.constructor;
    
    type() === undefined // true
    type(null) === null // true
    type(/./) === RegExp // true
    type(187) === Number // true
    type(type) === Function // true

    Получаем имя типа:

    const typename = x => x?.constructor.name ?? `${x}`;
    
    typename() // 'undefined'
    typename(null) // 'null'
    typename(false) // 'Boolean'
    typename('hello, world!!') // 'String'
    typename({}) // 'Object'
    typename([]) // 'Array'
    typename(document.body) // 'HTMLBodyElement'
    typename(document.getElementsByClassName('xxx')) // 'HTMLCollection'
    typename(new class XXX {}) // 'XXX'
    typename((c => new class YYY extends c {})(class XXX {})) // 'YYY'
    typename(typename) // 'Function'
    Ответ написан
    Комментировать
  • Как изменить цвет активного чипа v-chip vuetify?

    0xD34F
    @0xD34F Куратор тега Vue.js
    .xxx {
      background: red;
    }
    
    .xxx:hover {
      background: orange;
    }
    
    .xxx .v-chip__content {
      color: white;
      font-weight: bold;
    }

    <v-chip-group active-class="xxx">
    Ответ написан
  • Почему не работает vue-select?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Версия vue какая? 3? - показанную вами ошибку можно получить, попытавшись использовать vue-select внутри vue3-приложения. Поддержка vue3 пока отсутствует, но обещают, что скоро появится.
    Ответ написан
  • Как переместить слова задом наперед?

    0xD34F
    @0xD34F
    implode(', ', array_reverse(explode(', ', $str)))
    Ответ написан
    Комментировать
  • Как лучше организовать передачу данных во Vue?

    0xD34F
    @0xD34F Куратор тега Vue.js
    промежуточных компонентов может быть много

    provide / inject
    Ответ написан
    3 комментария
  • Как менять радиус круга при изменении ползунка?

    0xD34F
    @0xD34F Куратор тега Яндекс.Карты
    Кладёте ссылку на круг в компонент:

    this.circle = new ymaps.Circle(
      ...

    И устанавливаете наблюдение за свойством, которое представляет радиус:

    watch: {
      радиусКруга(val) {
        this.circle.geometry.setRadius(val);
      },
      ...

    https://jsfiddle.net/5qmrxez0/

    Или, если этот круг нигде больше не понадобиться, то можно не делать его свойством компонента, а прямо по месту его создания установить наблюдение за радиусом:

    const circle = new ymaps.Circle(
      ...
    );
    
    this.$watch('радиусКруга', val => circle.geometry.setRadius(val));

    https://jsfiddle.net/5qmrxez0/1/
    Ответ написан
    4 комментария
  • Как сделать, чтобы одновременно был открыт только один элемент аккордеона?

    0xD34F
    @0xD34F Куратор тега React
    const AccordionItem = ({ title, opened, toggle, children }) => (
      <div>
        <button onClick={toggle}>{title}</button>
        {opened && children}
      </div>
    );
    
    const Accordion = ({ items }) => {
      const [ opened, setOpened ] = useState(null);
    
      return (
        <div>
          {items.map((n, i) => (
            <AccordionItem
              title={n.title}
              opened={i === opened}
              toggle={setOpened.bind(null, i === opened ? null : i)}
            >
              <p>{n.text}</p>
            </AccordionItem>
          ))}
        </div>
      );
    };
    Ответ написан
    Комментировать
  • Как найти элементы, встречающиеся только в одном из двух массивов?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Уникализируем массивы; объединяем в один; перебираем, отмечая, встречался ли текущий элемент ранее - если элемент встречен впервые, будет false, повторно (т.е., представлен в более чем одном из исходных массивов) будет true; хватаем элементы, которые false:

    const diff = (...arrs) => Array
      .from(arrs
        .flatMap(arr => [...new Set(arr)])
        .reduce((acc, n) => acc.set(n, acc.has(n)), new Map))
      .reduce((acc, n) => (n[1] || acc.push(n[0]), acc), []);

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

    const diff = (...arrs) => Array
      .from(arrs.reduce((acc, arr) => (
        arr.forEach(n => acc.set(n, acc.get(n) ?? new Set).get(n).add(arr)),
        acc
      ), new Map))
      .reduce((acc, n) => (n[1].size === 1 && acc.push(n[0]), acc), []);

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

    const diff = (...arrs) =>
      arrs.reduce((acc, arr) => (
        arr.forEach(n =>
          arrs.every(m => m === arr || !m.includes(n)) &&
          !acc.includes(n) &&
          acc.push(n)
        ),
        acc
      ), []);
    Ответ написан
    1 комментарий
  • Как работать во Vue в computed со сеттерами?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Сеттер должен изменить данные, которые используются в геттере.

    Давайте рассмотрим на конкретном примере. Пусть есть массив объектов, на основе которых создаются чекбоксы:

    data: () => ({
      items: [
        { checked: false, label: '...' },
        { checked: false, label: '...' },
        ...
      ],
    }),

    <label v-for="n in items">
      <input type="checkbox" v-model="n.checked">
      {{ n.label }}
    </label>

    И мы хотим сделать чекбокс, который позволял бы устанавливать или снимать все чекбоксы сразу. Его состояние будет описываться вычисляемым свойством. Геттер - очевидно, будет содержать проверку, что все чекбоксы установлены. А сеттер будет устанавливать переданное ему значение всем чекбоксам. Как-то так:

    computed: {
      get() {
        return this.items.every(n => n.checked);
      },
      set(val) {
        this.items.forEach(n => n.checked = val);
      },
    },

    <label>
      <input type="checkbox" v-model="all">
      ALL
    </label>

    https://jsfiddle.net/j7hr68t4/
    Ответ написан
    4 комментария
  • Как заполнить TextArea через JS (калькулятор)?

    0xD34F
    @0xD34F Куратор тега JavaScript
    document.querySelector('.calc_container').addEventListener('input', e => {
      const block = e.target.closest('.calc_block');
      const price = +block.querySelector('.price span').innerText;
      const count = +e.target.value;
      block.querySelector('.summ span').innerText = price * count;
    
      const orderData = Array
        .from(e.currentTarget.querySelectorAll('.calc_block'), n => ({
          name: n.querySelector('label').innerText,
          count: +n.querySelector('.count').value,
          sum: +n.querySelector('.summ span').innerText,
        }))
        .filter(n => n.count);
    
      document.querySelector('.total_block span').innerText = orderData
        .reduce((acc, n) => acc + n.sum, 0);
    
      document.querySelector('textarea').value = orderData
        .map(n => `Название: ${n.name} | Количество: ${n.count}`)
        .join('\n');
    });
    Ответ написан
  • Как двумерный массив порезать на куски и превратить строки в столбцы?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const chunkedAndTransposed = ([ headers, ...arr ], chunkSize) =>
      arr.reduce((acc, n, i) => (
        (i % chunkSize) || acc.push(headers.map(m => [ m ])),
        n.forEach((m, j) => acc.at(-1)[j].push(m)),
        acc
      ), []);
    
    
    const result = chunkedAndTransposed(arr, 2);

    или, если на последний кусок данных не хватает, а размеры вложенных массивов должны быть одинаковыми, можно добавить null'ов или чего-нибудь ещё:

    const chunkedAndTransposed = (arr, chunkSize, defautlValue = null) =>
      Array.from({ length: Math.ceil((arr.length - 1) / chunkSize) }, (_, iChunk) =>
        Array.from({ length: arr[0].length }, (_, iCol) =>
          Array.from({ length: chunkSize + 1 }, (_, iRow) =>
            iRow ? arr[iChunk * chunkSize + iRow]?.[iCol] ?? defautlValue : arr[0][iCol]
          )
        )
      );
    
    
    const result = chunkedAndTransposed(arr, 5);
    Ответ написан
    4 комментария
  • Vue как обновить Круговую диаграмму через инпут?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Документацию пробовали открывать? Там есть ответ на ваш вопрос.

    Делаете вычисляемое свойство, которое будет содержат labels и datasets, передаёте его значение в компонент графика под именем chartData. В самом компоненте этот chartData передаёте в renderChart. Например.
    Ответ написан
    8 комментариев
  • Почему TypeError: this.props.addProduct is not a function?

    0xD34F
    @0xD34F Куратор тега React
    Что передаётся в компонент AddProductForm:

    AddProduct={this.props.addProduct}

    Как вы пытаетесь переданное использовать:

    this.props.addProduct(product);

    Правда считаете, что между "a" и "A" разницы нет?
    Ответ написан
    1 комментарий
  • Как сделать неактивными все option, значение которых меньше сегодняшнего числа?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Какое сегодня число, о каком select'е идёт речь и как обновлять состояние его option'ов:

    const today = new Date().getDate();
    const select = document.querySelector('select');
    const toggle = option => option.disabled = option.value < today;

    Обновляем:

    select.querySelectorAll('option').forEach(toggle);
    
    // или
    
    Array.prototype.forEach.call(select, toggle);
    
    // или
    
    for (const n of select.options) {
      toggle(n);
    }
    
    // или
    
    for (let i = 0; i < select.children.length; i++) {
      toggle(select.children[i]);
    }
    Ответ написан
    1 комментарий
  • Как продублировать содержимое элемента?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const duplicateContent = el =>
    
      // можно добавить копии вложенных узлов
      el.append(...el.cloneNode(true).childNodes);
    
      // или добавить копию разметки
      // el.insertAdjacentHTML('beforeEnd', el.innerHTML);
    
      // или перезаписать разметку в удвоенном виде
      // el.innerHTML += el.innerHTML;
      // el.innerHTML = el.innerHTML.repeat(2);
      // el.innerHTML = Array(3).join(el.innerHTML);
      // el.innerHTML = String.prototype.concat.apply('', Array(2).fill(el.innerHTML));
      // el.innerHTML = el.innerHTML.replace(/.+/, '$&$&');
      // el.innerHTML = /(.+)/.exec(el.innerHTML).join``;

    document.querySelectorAll('.btn').forEach(duplicateContent);
    
    // или
    
    for (const n of document.getElementsByClassName('btn')) {
      duplicateContent(n);
    }
    Ответ написан
  • Как можно оптимизировать этот код поиска совпадений в массиве?

    0xD34F
    @0xD34F Куратор тега JavaScript
    "Оптимизировать" - в смысле сократить? Вот так можно:

    const getDuplicatesIndex = (arr, key = n => n) =>
      Object.fromEntries(Object
        .entries(arr.reduce((acc, n, i) => ((acc[key(n)] ??= []).push(i), acc), {}))
        .filter(n => n[1].length > 1)
      );

    Если среди значений массива могут быть такие, которые, будучи различными, имеют одинаковый строковый эквивалент, то обычный объект следует заменить на Map:

    const getDuplicatesIndex = (arr, key = n => n) =>
      new Map(Array
        .from(arr.reduce((acc, n, i) => {
          const k = key(n);
          acc.set(k, acc.get(k) ?? []).get(k).push(i);
          return acc;
        }, new Map))
        .filter(n => ~-n[1].length)
      );
    Ответ написан
    Комментировать
  • Как создать такую функцию обертку?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Функция - это объект, ей можно добавить нужное свойство:

    function wrapper(fn) {
      function wrapped(...args) {
        return fn.apply(this, args);
      }
    
      wrapped.reset = () => console.log('hello, world!!');
    
      return wrapped;
    }
    Ответ написан
    Комментировать