Задать вопрос
  • Почему параграфы съезжают Vue-transition?

    0xD34F
    @0xD34F Куратор тега Vue.js
    <transition-group name='slide-components' mode="out-in"

    Открываем документацию, читаем, что transition-group принимает

    те же атрибуты, что и у <transition> кроме mode

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

    Вместо transition-group тут следует использовать transition:

    <transition name="slide-components" mode="out-in">
      <p :key="window">{{ window }}</p>
    </transition>
    Ответ написан
    Комментировать
  • El-select почему объединяет данные?

    0xD34F
    @0xD34F Куратор тега Vue.js
    <el-select v-model="this.divisions"

    <el-option v-for="(dvs, key) in divisions"

    То есть, одно и то же свойство используется и для создания опций, и для управления значением. Умно.

    "Объединяет данные" потому, что значение селекта является строкой, вы указали в качестве значения массив, массив приведённый к строке - это склеенные через запятую его элементы.

    618d16f38524b496425491.png

    Выглядит это так, будто компонент el-option не зарегистрирован.
    Ответ написан
  • Как задавать id новым элементам массива?

    0xD34F
    @0xD34F Куратор тега React
    Взять максимальный из существующих, добавить единицу:

    1 + Math.max(0, ...articles.map(n => n.id))

    Или сделать функцию, которая будет возвращать +1 относительно результата предыдущего вызова:

    const getId = (() => {
      let id = 0;
      return () => ++id;
    })();
    Ответ написан
    3 комментария
  • Как устранить затухание popup при клике на него?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Вызывайте fadeOut только после того, как убедитесь, что кликнут был кто надо:

    overlay.click(e => {
      if (e.target === e.delegateTarget) {
        overlay.fadeOut();
      }
    });
    
    // или
    
    overlay.click(function(e) {
      $(this).filter(e.target).fadeOut();
    });

    Или останавливайте всплытие кликов на вложенных элементах:

    overlay
      .click(() => overlay.fadeOut())
      .children()
      .click(e => e.stopPropagation());
    Ответ написан
    1 комментарий
  • Как запустить цикл each для каждого ключа json?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $.each($.parseJSON(response), (k, v) => $(`.${k}`).text(v));

    или

    for (const [ k, v ] of Object.entries(JSON.parse(response))) {
      document.querySelector(`.${k}`).innerText = v;
    }
    Ответ написан
    1 комментарий
  • Как отсортировать массив в обратном порядке?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const first = document.querySelector('.listing');
    const tag = 'p';
    const arr = [...'ABCDEF'];

    Обратный порядок не нужен:

    first.after(...arr.map(n => {
      const el = document.createElement(tag);
      el.textContent = n;
      return el;
    }));
    
    // или
    
    first.replaceWith(first, ...arr.reduce((acc, n, i) => (
      (acc[i] = document.createElement(tag)).innerText = n,
      acc
    ), []));
    
    // или
    
    arr.reduce((prev, n) => (
      prev.insertAdjacentElement('afterend', document.createElement(tag)),
      prev.nextSibling.append(n),
      prev.nextSibling
    ), first);
    
    // или
    
    const parent = first.parentNode;
    const nodes = parent.childNodes;
    
    arr.forEach(function(n) {
      const el = document.createElement(tag);
      el.appendChild(new Text(n));
      parent.insertBefore(el, nodes[++this[0]]);
    }, [ Array.prototype.indexOf.call(nodes, first) ]);
    
    // или
    
    first.insertAdjacentHTML(
      'afterend',
      arr.map(n => `<${tag}>${n}</${tag}>`).join('')
    );
    Ответ написан
    Комментировать
  • Как изменить data свойство VUE из метода приложения, данными полученными с сервера?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Конструкция this.items = JSON.parse(cart.response); - не работает, поскольку ajax функция в методе getUpdate – имеет свой контекст

    Предлагаю вам погуглить способы сохранения контекста - данный вопрос только на этом ресурсе поднимался сотни (если не тысячи) раз.

    Достучаться до app.items – тоже не получается.

    Экземпляр корневого компонента возвращает метод mount, а не createApp.
    Ответ написан
  • Как в react работать с событием ресайза и как при загрузке определить ширину экрана и поменять стейт?

    0xD34F
    @0xD34F Куратор тега React
    onResize = () => {
      this.setState(() => ({
        /* ... */
      }));
    }
    
    componentDidMount() {
      window.addEventListener('resize', this.onResize);
      this.onResize();
    }
    
    componentWillUnmount() {
      window.removeEventListener('resize', this.onResize);
    }

    https://jsfiddle.net/jmz39vwo/
    Ответ написан
  • Как сделать, чтобы выбранное значение в списке заменяло собой список?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $('table').on('change', 'select', ({ target: t }) => {
    
      $(t).replaceWith(t.value);
    
      // или
    
      $(t).prop('outerText', t.value);
    
      // или
    
      $(t).after(t.value).remove();
    });

    или

    const isSelect = el => el.tagName === 'SELECT';
    // или
    const isSelect = el => el.nodeName === 'SELECT';
    // или
    const isSelect = el => el.matches('select');
    // или
    const isSelect = el => el instanceof HTMLSelectElement;

    document.querySelector('table').addEventListener('change', ({ target: t }) => {
      if (isSelect(t)) {
    
        t.replaceWith(t.value);
    
        // или
    
        t.parentNode.replaceChild(new Text(t.value), t);
    
        // или
    
        t.outerText = t.value;
    
        // или
    
        t.after(t.value);
        t.remove();
    
        // или
    
        t.parentNode.replaceChildren(...Array.from(
          t.parentNode.childNodes,
          n => n === t ? t.value : n
        ));
      }
    });
    Ответ написан
    Комментировать
  • Как более компактно получить тексты ошибок и выводить цвета?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Цвета:

    progress.css('background-color', [
      { min: 100, color: '#47C965' },
      { min:  40, color: '#f5dd30' },
      { min:   0, color: '#bf4542' },
    ].find(n => n.min <= strength).color);

    Тексты ошибок: не надо никаких атрибутов, сразу положите их в объекты.
    Но если всё же хотите идти путём говнокодера, то
    const tests = [ здесь перечисляете регулярные выражения ].map((n, i) => ({
      regex: n,
      message: error_wrap.attr(`data-error_${i + 1}`),
    }));
    Ответ написан
    1 комментарий
  • Как найти дубликаты в массиве?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Собрать новый массив:

    const newArr = arr.map(function(n) {
      return this[n];
    }, arr.reduce((acc, n) => (acc[n] = acc.hasOwnProperty(n), acc), {}));
    
    // или
    
    const count = arr.reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {});
    const newArr = arr.map(n => count[n] > 1);
    
    // или
    
    const newArr = arr.map((n, i, a) => a.indexOf(n) !== a.lastIndexOf(n));

    Обновить существующий:

    arr.forEach(function(n, i, a) {
      a[i] = !!~-this.get(n);
    }, arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map));
    
    // или
    
    const duplicates = arr.reduce((acc, n) => acc.set(n, acc.has(n)), new Map);
    arr.splice(0, arr.length, ...arr.map(n => duplicates.get(n)));
    
    // или
    
    Object
      .values(arr.reduce((acc, n, i) => ((acc[n] ??= []).push(i), acc), {}))
      .forEach(n => n.forEach(i => arr[i] = n.length > 1));
    Ответ написан
    2 комментария
  • Почему появляется две галочки?

    0xD34F
    @0xD34F Куратор тега CSS
    input[type=checkbox], label{

    Вместо , должен быть +.

    А чекбоксу надо задать display; none;.
    Ответ написан
    Комментировать
  • Как получить текст выбранного option'а?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Поскольку в показанном select'е у option'ов отсутствуют атрибуты value, то их значениями будет их текстовое содержимое. Так что в данном конкретном случае текст можно получить с помощью метода val.

    Ну а вообще:

    $('select').change(function() {
      const text = $(':checked', this).text();
      console.log(text);
    });

    Или, к чёрту jquery:

    document.querySelector('select').addEventListener('change', function(e) {
      const select = this;
      // или
      // const select = e.target;
      // const select = e.currentTarget;
    
      const [ option ] = select.selectedOptions;
      // или
      // const option = select[select.selectedIndex];
      // const option = select.querySelector(':checked');
      // const option = [...select.options].find(n => n.selected);
    
      const text = option.text;
      // или
      // const text = option.textContent;
      // const text = option.innerText;
    
      console.log(text);
    });
    Ответ написан
    Комментировать
  • Как сделать фильтрацию результатов по поиску?

    0xD34F
    @0xD34F Куратор тега JavaScript
    document.querySelector('#filter-input').addEventListener('input', e => {
      const val = e.target.value.toLowerCase();
    
      container.querySelectorAll('.title').forEach(n => {
        n.closest('.card').style.display = n.innerText.toLowerCase().includes(val)
          ? 'block'
          : 'none';
      });
    });

    или

    document.getElementById('filter-input').oninput = function() {
      const val = this.value.toLowerCase();
    
      for (const n of container.getElementsByClassName('title')) {
        let card = n;
        while (!(card = card.parentNode).classList.contains('card')) ;
        card.hidden = n.textContent.toLowerCase().indexOf(val) === -1;
      }
    };
    Ответ написан
    1 комментарий
  • Как из компонента обновлять объект в хранилище?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Когда в хранилище появится новое свойство, будете вручную его добавлять в компонент? Хранилище доступно в data (если, конечно, не будете делать её стрелочной), так что можно просто скопировать объект; в наблюдателе вместо проверок конкретных свойств можно сделать цикл по всем:

    rangeValues: { ...this.$store.state.CarSetup },

    Object.entries(newValue).forEach(([ k, v ]) => {
      if (v !== oldValue[k]) {
        this.$store.commit('setCarInfo', { to: k, value: v });
      }
    });


    А вообще, не надо ни копии объекта из хранилища, ни наблюдателя. Вырезаете returnValue, свойство rangeValues из обычного делаете вычисляемым:

    computed: {
      rangeValues() {
        return new Proxy(this.$store.state.carSetup, {
          set: (target, key, val) => {
            this.$store.commit('setCarInfo', { [key]: val });
            return true;
          },
        });
      },
    },

    Мутацию переписываете следующим образом:

    setCarInfo: (state, payload) => Object.assign(state.carSetup, payload),
    Ответ написан
  • Как динамично сформировать объект?

    0xD34F
    @0xD34F Куратор тега JavaScript
    С чего должны начинаться имена свойств: const key = 'answer';.

    Собираем объект:

    const obj = Object.fromEntries(arr.map((n, i) => [ `${key}${i + 1}`, n ]));

    или

    const obj = arr.reduce((acc, n, i) => (acc[key + ++i] = n, acc), {});

    или

    const obj = {};
    for (const [ i, n ] of arr.entries()) {
      obj[key.concat(-~i)] = n;
    }

    или

    const obj = (function get(arr) {
      const i = arr.length;
      const n = arr.pop();
      return i
        ? { ...get(arr), [[ key, i ].join``]: n }
        : {};
    })([...arr]);
    Ответ написан
    5 комментариев
  • Как перепарсить словарь python?

    0xD34F
    @0xD34F
    keys = list(data.keys())
    result = [ { k: data[k][i] for k in keys } for i in range(len(data[keys[0]])) ]
    Ответ написан
    Комментировать
  • Как сделать фильтр списка, если у элемента несколько категорий массивом?

    0xD34F
    @0xD34F Куратор тега Vue.js
    computed: {
      filteredProducts() {
        const keyword = this.keyword.toLowerCase();
    
        return this.products.filter(item => (
          (item.name.toLowerCase().includes(keyword)) &&
          (!this.colors.length || this.colors.includes(item.color)) &&
          (!this.sizes.length || this.sizes.some(n => item.size.includes(n))) &&
          (!this.categories.length || this.categories.includes(item.category))
        ));
      },
      ...

    UPD. Вопрос конечно был не об этом, но уж как-то сильно глаз режет... Размеры ладно, какие они бывают известно заранее и их немного, но вот, скажем, цвета - когда изменится список товаров, будете вручную его просматривать и обновлять список цветов? Можно вычислять автоматически:

    computed: {
      colorFilter() {
        return Array
          .from(new Set(this.products.map(n => n.color)))
          .sort((a, b) => a.localeCompare(b));
      },
      ...
    Ответ написан
    Комментировать
  • Как получить данные элемента по клику в итерации?

    0xD34F
    @0xD34F Куратор тега React
    onChange = {(event, userItem)=>handleChange(event, userItem)}

    Убрать userItem из списка параметров: onChange={e => handleChange(e, userItem)}.

    Или, onChange={handleChange.bind(userItem)},

    function handleChange(e) {
      console.log('userItem', this);
      console.log('value', e.target.value);
    }
    Ответ написан
    Комментировать
  • Как проверить регистр первой буквы?

    0xD34F
    @0xD34F Куратор тега JavaScript
    str[0] === str[0].toUpperCase()

    или

    /^[A-Z]/.test(str)

    или

    (c => 64 < c && c < 91)(str.charCodeAt(0))

    или

    'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.includes(str.at(0))

    Но что если там вообще не буква?
    Если такое может быть, то...
    ...ни хрена тут больше не скажу, тщательнее надо было вопрос продумывать.
    Ответ написан
    Комментировать