Задать вопрос
  • Как клонировать элемент и изменить его атрибуты?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $('select')
      .last()
      .clone()
      .attr('id', (i, id) => id.replace(/\d+$/, m => +m + 1))
      .appendTo('body');
    Ответ написан
    Комментировать
  • Как каждый блок обернуть в группу?

    0xD34F
    @0xD34F
    const data = [
      { title: 'a', value:   0 },
      { title: 'b', value: 100 },
      { title: 'c', value: 200 },
    ];
    
    d3.select('#svg')
      .selectAll('g')
      .data(data)
      .enter()
      .append('g')
      .append('rect')
      .attr('x', d => d.value)
      .attr('y', d => d.value)
      .attr('width', 50)
      .attr('height', 50)
      .attr('fill', '#F0A');
    Ответ написан
    1 комментарий
  • Как реализовать подзагрузку страницы перед переходом на нее в Vue JS?

    0xD34F
    @0xD34F Куратор тега Vue.js
    В интересующем вас компоненте определяете хук beforeRouteEnter - в нём и инициируете получение данных. Как оно конкретно выглядит - непосредственно выполнение запроса, или вызов экшена - тут вам виднее. После получения данных дёргаете next. Всё.

    UPD. Не, не всё. Если не очень поняли, о чём я - сделал небольшой пример. Три роута, первые два ни о чём, последний - показывает данные из хранилища. И при каждом переходе инициирует их обновление.
    Ответ написан
    Комментировать
  • Почему так отрабатывает скрипт js?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Не вижу явного удаления из дом дерева.

    Неявно тоже ничего не удаляется - элемент перенесён в .js-select-tabs-head, неужели этого не видно? Или вы думаете, что там другой элемент, копия? Это не так - можете получить элемент до вызова html, после, сравнить их, увидите, что это один и тот же элемент.

    Хотите, чтобы происходило копирование вместо перемещения... Ну, очевидно же:

    $head.html($text.filter('.is-active').clone()).
    Ответ написан
    2 комментария
  • Как составить регулярное выражение?

    0xD34F
    @0xD34F Куратор тега Регулярные выражения
    $str = preg_replace('/[^\n\w]+/', ' ', $str);
    Ответ написан
  • Как реализовать смену цвета при клике в списке vue?

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

    UPD. jsfiddle.net/42bfx93e
    Ответ написан
    Комментировать
  • Как переключаться в пошаговой форме с проверкой заполнения?

    0xD34F
    @0xD34F Куратор тега JavaScript
    При подключении обработчиков клика к кнопкам навигации, сами кнопки вы ищите внутри формы - а их там нет.

    Замените

    form.on("click", ".next", function(event) {

    на

    $(".next").on("click", function(event) {

    Аналогично и с .back.

    Ну или засуньте кнопки в форму.
    Ответ написан
    Комментировать
  • Почему в svg не отображается div?

    0xD34F
    @0xD34F
    Надо указать пространство имён, к которому относится добавляемый элемент.

    Т.е., вместо append('div') должно быть append('xhtml:div').

    Если захотите добавить внутрь div'а ещё что-то - указывать пространство имён уже не нужно, по умолчанию оно наследуется от родительского элемента.
    Ответ написан
    Комментировать
  • Как настроить throttle/debounce в этом случае?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Проблема в том, что метод popup - он у вас один на все экземпляры компонента. Отсюда и невозможность закрытия попапов сразу после открытия - метод просто не вызывается, таймаут ещё не окончился.

    Чтобы работало так, как вы хотите, popup в каждом отдельном экземпляре должен быть уникальной функцией, т.е. в methods ему не место:

    created() {
      this.popup = _.throttle(function(state) {
        this.show = ({
          enter: true,
          leave: false,
        })[state];
      }, 500, {
        leading: false,
        trailing: true,
      });
    },

    Ну и как-то громоздко выглядит. Может ну их, эти enter/leave:

    this.popup = _.throttle(show => this.show = !!show, 500, {
      leading: false,
      trailing: true,
    });

    <a href="#" @mouseenter="popup(1)" @mouseleave="popup(0)">

    ??
    Ответ написан
    3 комментария
  • Как заменить полностью слово из строки, а не только его часть?

    0xD34F
    @0xD34F Куратор тега JavaScript
    При замене вместо строки используйте регулярное выражение, соответствующее строке и произвольному количеству символов. Т.е, замените

    this.api = this.api.replace(word, 'BOOM')

    на что-то вроде

    this.api = this.api.replace(RegExp(`\\b${word}[a-z]*\\b`, 'ig'), 'BOOM')
    Ответ написан
  • Маска для поля ввода телефонного номера в vue?

    0xD34F
    @0xD34F Куратор тега Vue.js
    решил использовать фильтр

    Почему? Зачем? Вот вы выше говорите, что "есть много готовых плагинов" - так посмотрели бы, как там реализована подобная функциональность. Увидели бы, что для таких вещей применяются директивы. Как-то так, например.
    Ответ написан
    1 комментарий
  • Как сделать динамические импорты?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Понятно, что можно добавить в форму все виды инпутов и, например, использовать
    < component :is='нужный инпут в зависимости от пропса'>

    Вот так и поступите. Регистрируете все возможные компоненты, сделав их асинхронными.
    Ответ написан
  • Как реализовать вычисления в виде цепочки вызовов методов?

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

    function calc(val) {
      const self = Object.create(calc.prototype);
      self.val = val;
      return self;
    }
    calc.prototype = {
      plus(val) {
        this.val += val;
        return this;
      },
      minus(val) {
        this.val -= val;
        return this;
      },
      valueOf() {
        return this.val;
      },
    };
    
    +calc(0).plus(1); // 1
    +calc(1).plus(1).plus(1); // 3
    +calc(1).plus(2).plus(3).plus(4).minus(5); // 5
    calc(3).plus(7).minus(2) * 3; // 24
    99 + calc(1); // 100
    Ответ написан
    Комментировать
  • Как сделать обрезание массива?

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

    const newArr = arr.slice(-5);

    Или, обновляем существующий:

    arr.splice(0, arr.length - 5);
    Ответ написан
    1 комментарий
  • Как найти сумму?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const uniqueWithSum = (arr, idKey, sumKey) =>
      Object.values(arr.reduce((acc, n) => (
        acc[n[idKey]] = acc[n[idKey]] || { ...n, [sumKey]: 0 },
        acc[n[idKey]][sumKey] += n[sumKey],
        acc
      ), {}));

    const result = uniqueWithSum([ ...a, ...b ], 'id', 'count');
    Ответ написан
    Комментировать
  • Как написать регулярку на преобразование из CamelCase в kebab-case?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const kebab = str => str.replace(/\b([A-Z][a-z]*)+\b/g, n => n.replace(/([A-Z])/g, '-$1').replace(/^-/, '').toLowerCase());
    
    console.log(kebab('KebabCase noKebabCase No_Kebab_Case And FuckDonaldTrump!!')); // "kebab-case noKebabCase No_Kebab_Case and fuck-donald-trump!!"
    Ответ написан
    6 комментариев
  • Как изменить строку несколько раз в цикле?

    0xD34F
    @0xD34F Куратор тега JavaScript
    for (const n of words) {
      string = string.replace(RegExp(`\\b${n}\\b`, 'gi'), m => `<a href="#">${m}</a>`);
    }

    или

    const newString = words.reduce((acc, n) => {
      return acc.replace(RegExp(`\\b${n}\\b`, 'gi'), '<a href="#">$&</a>');
    }, string);
    Ответ написан
    2 комментария
  • Audiojs задать звук по умолчанию?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Насчёт "по умолчанию" - что-то ничего не видать, а вот просто установить громкость: audio.setVolume(0.5);.
    Ответ написан
  • Зачем передавать event в компонент Vue?

    0xD34F
    @0xD34F Куратор тега Vue.js
    зачем передавать: @my-event="myEvent" ?

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

    Итак, зачем назначать обработчик события? Вообще - это вам виднее, надо или не надо обрабатывать событие, и если надо, то как именно. А в данном конкретном случае - чтобы обновить значение свойства родительского компонента, отвечающего за состояние диалогового окна.

    Кстати,в явном виде делать это совсем не обязательно.

    Первый вариант - можно использовать модификатор sync при привязке значения параметра aa:

    <modal-notifications :aa.sync="isActive" :message="message"></modal-notifications>

    Метод закрытия в компоненте окна в этом случае станет выглядеть так:

    closeModalWindow() {
      this.$emit('update:aa', false);
    },

    Второй вариант - управлять состоянием окна посредством директивы v-model. Надо будет заменить имя параметра с aa на value (ну или настроить model):

    props: ['aa', 'message'], ---> props: [ 'value', 'message' ],
    :class="{'is-active': aa}" ---> :class="{ 'is-active': value }"

    Переписать метод закрытия окна:

    closeModalWindow() {
      this.$emit('input', false);
    },

    Ну а в родительском компоненте станет так:

    <modal-notifications v-model="isActive" :message="message"></modal-notifications>



    Я же делаю из потомка this.$emit('my-event', this.isActive) которое слушает родитель.

    Никто ничего просто так не "слушает". Чтобы "слушать", надо назначить обработчик соответствующего события. Что и происходит посредством @my-event="myEvent".

    эмит выше вроде бы не нужен, но без него не работает

    Чё? Какой ещё "эмит"? Нет "выше" никакого "эмита". Вы в родителе событие обрабатываете, а не порождаете.

    И еще вопрос. Что делает:
    myEvent: function(isActive) {
      this.isActive = isActive
    }

    Почему оно должно что-то принимать? Можно же просто значение из data взять.

    "Значение из data" брать бессмысленно - это и есть this.isActive. Который вам обновить надо. Обновить значением, которое присылает диалоговое окно. Значением, которое передаётся в (т.е., которое принимает) обработчик события.
    Ответ написан
    Комментировать
  • Как исправить TypeError: Объект не поддерживает свойство или метод "forEach"?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Посмотрел поддержку forEach: она отличная.

    Это другой forEach - принадлежащий Array.prototype. У вас ошибка возникает из-за отсутствия NodeList.prototype.forEach.

    Что можно сделать:

    • Найти/написать самостоятельно и добавить полифилл
    • Использовать forEach массива:

      Array.prototype.forEach.call(items, function(n) {
        // ...
      });

    • Использовать обычный цикл со счётчиком:

      for (var i = 0; i < items.length; i++) {
        // ...
      }

    • В IE не заработает, а вот в Safari 9, говорят, должно:

      for (var n of items) {
        // ...
      }

    Ответ написан
    1 комментарий