• Какие короткие ссылки можно использовать на qna.habr.com?

    0xD34F
    @0xD34F
    полагаю это техническая ошибка и её нужно исправить

    Это сюда. Тема - "Ошибка в работе сайта".

    Или же пересмотреть правила

    Туда же. Только подавайте как гениальную идею.
    Ответ написан
    Комментировать
  • Как эффективно заменить текущий HTML элемент на другой?

    0xD34F
    @0xD34F Куратор тега JavaScript
    элемент.insertAdjacentHTML('afterend', разметка);
    элемент.remove();
    
    // или
    
    элемент.outerHTML = разметка;
    Ответ написан
    4 комментария
  • Как сделать так чтобы колонки в таблице Element Plus были draggable?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Можно попробовать использовать sortable.js:

    <el-table
      ref="table"
      ...
    >
      ...

    const table = ref();
    
    onMounted(() => { 
      new Sortable(table.value.$el.querySelector('thead tr'), {
        handle: 'span',
        onEnd(e) {
          columns.value.splice(e.newIndex, 0, columns.value.splice(e.oldIndex, 1)[0]);
        },
      });
    });
    Ответ написан
  • Как в Apex Charts покрасить маркеры на графике в зависимости от значения?

    0xD34F
    @0xD34F Куратор тега JavaScript
    colors: markerColors, // Устанавливаем цвета маркеров в зависимости от результата

    Эта настройка предназначена для назначения цветов не отдельных маркеров, а относящихся к одному набору данных. Так что, чтобы заработало так, как вы хотите, придётся данные разделить. После чего использовать эту настройку станет уже необязательно - цвета можно задавать непосредственно внутри наборов данных. Недостаток - общей линией точки на графике не будут соединены.

    Другой вариант - воспользоваться свойством discrete, позволяющим индивидуально настраивать внешний вид каждого маркера. Всплывающую подсказку это никак не затрагивает, так что её придётся кастомизировать отдельно.
    Ответ написан
    Комментировать
  • Как создать объект с контекстом родительского объекта?

    0xD34F
    @0xD34F Куратор тега JavaScript
    function bindRootContext(obj, context = obj) {
      return new Proxy(obj, {
        get(target, key) {
          const val = target[key];
          return (
            val instanceof Function ? val.bind(Object.hasOwn(target, key) ? context : target) :
            val instanceof Object   ? bindRootContext(val, context) :
                                      val
          );
        },
      });
    }
    
    
    const obj = bindRootContext({
      name: 'Root',
      a: {
        name: 'A',
        logName() { console.log(this.name); },
        b: {
          name: 'B',
          logName() { console.log(this.name); },
          arr: [
            {
              name: '666',
              logName() { console.log(this.name); },
            },
            function() { console.log(this.name); },
          ],
          c: {
            name: 'C',
            logName() { console.log(this.name); },
          },
        },
      },
    });
    
    obj.a.b.c.logName(); // Root
    obj.a.b.logName(); // Root
    obj.a.logName(); // Root
    obj.a.b.arr[0].logName(); // Root
    obj.a.b.arr[1](); // Root
    Ответ написан
    1 комментарий
  • Можно ли пользоваться структурами данных из SDK при решении алгоритмических секций?

    0xD34F
    @0xD34F
    Можно ли пользоваться структурами данных из SDK при решении алгоритмических секций?

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

    читинг или норм решение?

    Да конечно "читинг". Но по другой причине:

    mergedList.sort()

    То решение, которое от вас тут ожидается, не предполагает применения сортировки - ни встроенной, ни вручную.
    Ответ написан
    Комментировать
  • Как вывести на страницу карточки с картинкой, ссылка на которую указываю в модальном окне input?

    0xD34F
    @0xD34F Куратор тега JavaScript
    кнопка.addEventListener('click', () => {
      const [ li ] = шаблон.content.cloneNode(true).children;
      li.querySelector('.card__image').src = инпут_с_ссылкой.value;
      li.querySelector('.card__title').textContent = инпут_с_подписью.value;
      список.insertAdjacentElement('afterbegin', li);
    
      // или
    
      список.prepend(document.importNode(шаблон.content, true));
      список.querySelector('img').setAttribute('src', инпут_с_ссылкой.value);
      список.querySelector('h2').innerText = инпут_с_подписью.value;
    });
    Ответ написан
  • Как вывести сложный объект на график в DevExtreme Angular 17?

    0xD34F
    @0xD34F
    Надо найти в документации пример нужного вам графика, посмотреть, в каком виде следует подавать в него данные, привести свои данные к этому виду. Всё.
    Ответ написан
  • Как добавить событие фокуса на динамические элементы?

    0xD34F
    @0xD34F Куратор тега JavaScript
    К чёрту focus, используйте focusin, оно всплывает, в отличие от.
    Ответ написан
    Комментировать
  • Как перемещаться по элементам вложенных массивов, используя стрелки?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Вариант раз. Нужно знать два индекса - элемента внешнего массива и элемента внутреннего, добавим в компонент соответствующее свойство:

    data: () => ({
      active: [ 0, -1 ],
      ...

    При переходе к следующему/предыдущему элементу изменяем внутренний индекс, если вышли за границу внутреннего массива, переходим к следующим/предыдущим элементам внешнего массива, пока не встретится такой, у которого внутри что-то есть; внутренний индекс при этом сбрасываем в крайнее положение - чтобы соответствовал первому или последнему элементу вложенного массива, в зависимости от направления движения:

    methods: {
      onKeyDown(e) {
        const { items } = this;
        const step = ({
          ArrowUp: -1,
          ArrowDown: 1,
        })[e.key];
    
        if (step && items.some(n => n.children?.length)) {
          let iItem = this.active[0];
          let iChild = this.active[1] + step;
    
          while (!items[iItem].children?.[iChild]) {
            iItem = (iItem + step + items.length) % items.length;
            iChild = step === 1 ? 0 : ~-items[iItem].children?.length;
          }
    
          this.active = [ iItem, iChild ];
        }
      },
      ...

    Осталось выделить как активный тот DOM-элемент, индексы которого совпадают с сохранёнными в экземпляре компонента, назначаем класс при равенстве обоих пар значений:

    <ul>
      <li v-for="(item, iItem) in items">
        <ul>
          <li
            v-for="(child, iChild) in item.children"
            :class="{ active: active[0] === iItem && active[1] === iChild }"
            ...

    Вариант два - развернём в общий плоский массив элементы вложенных массивов:

    computed: {
      children() {
        return this.items.flatMap(n => n.children ?? []);
      },
      ...

    Тогда можно будет обойтись одним индексом:

    data: () => ({
      active: null,
      ...

    Которому просто делаем +/- 1:

    methods: {
      onKeyDown({ key }) {
        const { length } = this.children;
        const step = 
          key === 'ArrowUp'   ? -1 :
          key === 'ArrowDown' ?  1 :
                                 0;
    
        if (step && length) {
          const active = this.active ?? (step === 1 ? -1 : length);
          this.active = Math.max(0, Math.min(length - 1, active + step));
        }
      },
      ...

    Если элемент вложенного массива совпадает с тем, который можно достать из плоского массива, воспользовавшись индексом, добавим соответствующему DOM-элементу класс:

    <ul>
      <li v-for="item in items">
        <ul>
          <li
            v-for="child in item.children"
            :class="{ active: children[active] === child }"
            ...
    Ответ написан
    Комментировать
  • Как сделать цикл for, берущий значения из класса, в python?

    0xD34F
    @0xD34F
    __iter__, iter:

    def __iter__(self):
      return iter(self.colors)
    Ответ написан
    Комментировать
  • Как реализовать подкомпоненты во vue?

    0xD34F
    @0xD34F Куратор тега Vue.js
    В верхнем компоненте хранится текущее состояние, которое вместе с методом его обновления через provide / inject предоставляется ниже расположенным компонентам. Например.
    Ответ написан
    1 комментарий
  • Как сделать страницу с тремя вкладками на каждой из которых будет своё приложение vue3?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Не надо заниматься ерундой. Делайте одно приложение, в качестве контента вкладок будут выступать различные компоненты. Как переключаться между ними? - известно как.

    чтобы данные не терялись

    Не проблема.
    Ответ написан
    2 комментария
  • Результаты поиска или как настроить выпадающий список?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Добавляем в компонент свойство - индекс выбранного элемента выпадающего списка, по нажатию на стрелки делаем ему плюс-минус один. В зависимости от равенства значения этого свойства текущему индексу в v-for назначаем элементу списка класс, который его визуально выделит. Как-то так.
    Ответ написан
    1 комментарий
  • Поиск на сайте. Как сделать "ничего не найдено"?

    0xD34F
    @0xD34F Куратор тега Vue.js
    const filteredProducts = computed(() => {
      const search = searchQuery.value.toLowerCase();
      return search.length > 2
        ? data.value.filter(n => n.title.toLowerCase().includes(search))
        : null;
    });

    <ul v-if="filteredProducts" class="search-result">
      <li v-if="!filteredProducts.length">
        <h3>ничего не найдено</h3>
      </li>
      <li v-for="n in filteredProducts">
        <div>
          <Image :src="n.image" :alt="n.title" width="40" height="40" />
        </div>
        <h3>{{ n.title }}</h3>
        <div>
          <p>{{ n.price }}</p>
        </div>
      </li>
    </ul>
    Ответ написан
    1 комментарий
  • Vue3 как показать скрыть элемент внутри v-for?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Показываем не более одного - добавляем в компонент свойство, которое будет содержать id, индекс или ещё что-то уникальное для каждого из элементов данных (да хоть бы и ссылку на сам элемент). Показываем скрытое в зависимости от равенства значения этого свойства тому, что доступно в текущей итерации v-for.

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

    0xD34F
    @0xD34F Куратор тега JavaScript
    Как получить строки таблицы:

    // если гарантируется отсутствие thead и tfoot, или их содержимое также должно учитываться
    const { rows } = table;
    
    // если tbody один
    const [ { rows } ] = table.tBodies;
    
    // если tbody несколько
    const rows = Array.prototype.flatMap.call(table.tBodies, n => [...n.rows]);
    // или
    const rows = [].concat(...Array.from(table.tBodies, n => [...n.children]));
    // или
    const rows = table.querySelectorAll('tbody tr');

    Как получить средний элемент:

    const middle = arr => arr[arr.length >> 1];
    // или
    const middle = arr => arr[Math.floor(arr.length / 2)];
    // или
    const middle = arr => arr[Math.round(~-arr.length / 2)];
    // или
    const middle = arr => arr[(arr.length - arr.length % 2) / 2];

    Всё, можно доставать ячейку:

    const cell = middle(middle(rows).cells);
    // или
    const cell = middle([].reduce.call(rows, (acc, n) => (acc.push(...n.children), acc), []));
    // или, без получения строк
    const cell = middle(table.querySelectorAll('tbody td'));
    Ответ написан
    Комментировать
  • Как зациклить эффект печати?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Строки сложить в массив. Завести два индекса - текущей строки и её последнего отображаемого символа. Если при увеличении количества отображаемых символов выходим за границу строки - переключаемся на следующую строку и сбрасываем счётчик символов.

    Куда, что и с какой задержкой будем печатать:

    const el = document.querySelector('p');
    const strings = [ 'hello, world!!', 'fuck the world', 'fuck everything' ];
    const delay = 100;

    Печатаем:

    function Typewriter(el, strings, delay) {
      let i = 0;
      let length = 0;
    
      return setInterval(() => {
        if (++length > strings[i].length) {
          i = -~i % strings.length;
          length = 0;
        }
    
        el.textContent = strings[i].slice(0, length);
      }, delay);
    }
    
    
    const intervalId = Typewriter(el, strings, delay);
    // хотим остановить, делаем так: clearInterval(intervalId);

    или

    function Typewriter(el, strings, delay) {
      let timeoutId = null;
    
      (function step(i, length) {
        length = -~length % -~strings[i].length;
        i = (i + !length) % strings.length;
        el.innerText = strings[i].substring(0, length);
        timeoutId = setTimeout(step, delay, i, length);
      })(0, 0);
    
      return () => clearTimeout(timeoutId);
    }
    
    
    const stop = Typewriter(el, strings, delay);
    // хотим остановить, делаем так: stop();
    Ответ написан
    1 комментарий
  • Как при нажатии на кнопку из ul удалить li с максимальным значением?

    0xD34F
    @0xD34F Куратор тега JavaScript
    При повторном нажатии на кнопку максимальным числом выскакивает число удалённого li.

    Как и должно быть. Кто вам обещал, что вызов метода remove приведёт к исчезновению элемента из lis? Искать максимальный элемент следует среди тех, что всё ещё присутствуют на странице, а не тех, что были изначально - то есть, или надо получать элементы непосредственно перед поиском, или коллекция элементов должна быть динамической.

    Сам поиск максимального элемента - это какая-то шизофрения, какого чёрта вы удаляете элементы до того, как будут проверены значения всех (т.е., до того, как убедитесь, что тот, который собираетесь удалить, действительно максимальный - попробуйте сделать максимальный не первым, и посмотрите, что получится)? При переборе коллекции надо запоминать максимальный элемент, сравнивать с текущим, если текущий больше, обновлять максимум.

    function max(data, key = n => n) {
      const getVal = key instanceof Function ? key : n => n[key];
      let result = [ void 0, -Infinity ];
    
      for (const n of data) {
        const val = getVal(n);
        if (result[1] < val) {
          result = [ n, val ];
        }
      }
    
      return result[0];
    }
    
    
    document.querySelector('button').addEventListener('click', function(e) {
      max(this, n => +n.textContent)?.remove();
      e.target.disabled = !this.length;
    }.bind(document.querySelector('ul').children));
    Ответ написан
  • Как удалить поведение в третьей версии яндекс карт?

    0xD34F
    @0xD34F Куратор тега Яндекс.Карты
    Получить массив текущих поведений, выкинуть лишнее, установить:

    map.setBehaviors(map.behaviors.filter(n => n !== 'drag'));
    Ответ написан
    1 комментарий