Задать вопрос
  • Как составить регулярное выражение?

    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 комментарий
  • Как написать регулярку на преобразование из 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 комментарий
  • Как заставить работать скрипт с ошибками без конструкции try { .. } catch(e) { .. }?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Проверяйте, существует ли элемент, который пытаетесь удалить:

    const el = currentTarget.querySelector('селектор элемента');
    if (el) {
      el.remove();
    }
    Ответ написан
    1 комментарий
  • Как скачать данные из одного столбца?

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

    const tableEl = document.querySelector('селектор_таблицы');
    const colIndex = индекс_столбца;

    Получаем:

    const colData = Array.from(
      tableEl.rows,
      ({ cells: { [colIndex]: n } }) => n && n.textContent
    );
    
    // или
    
    const colData = Array.prototype.map.call(
      tableEl.querySelectorAll(`tr > :nth-child(${colIndex + 1})`),
      n => n.innerText
    );
    
    // или
    
    const colData = [];
    for (const n of table.querySelectorAll('tr')) {
      colData.push((n.children[colIndex] || {}).innerHTML);
    }
    Ответ написан
    Комментировать
  • Как удалить классы у всех дочерних элементов?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Где элементы находятся и какой класс надо удалить:

    const parentSelector = '.parent';
    const className = 'custom';

    Удаляем:

    document.querySelectorAll(`${parentSelector} > .${className}`).forEach(n => {
      n.classList.remove(className);
    });
    
    // или
    
    for (const n of document.querySelector(parentSelector).children) {
      n.className = n.className.replace(RegExp(`(^| )${className}(?= |$)`), '').trim();
    }
    Ответ написан
    4 комментария
  • Как считать цену при нажатии на div?

    0xD34F
    @0xD34F Куратор тега JavaScript
    По клику на .colors вызывайте функцию пересчёта:

    $('.colors').on('click', '.color', function() {
      $(this).toggleClass('checked');
      calculate();
    });

    В самой функции добавьте обход .colors .checked и суммирование их data-price:

    total += $('.colors .checked', this)
      .get()
      .reduce((acc, n) => acc + +n.dataset.price, 0);
    Ответ написан
    1 комментарий
  • Дублирование полей Template driven формы, как разделить данные?

    0xD34F
    @0xD34F
    Понадобится свойство - массив данных блоков, и метод, который будет принимать количество блоков и добавлять или удалять данные, в зависимости от того, как переданное значение соотносится с текущим количеством блоков:

    formData = [];
    
    updateFormData(newLen) {
      const oldLen = this.formData.length;
    
      if (oldLen > newLen) {
        this.formData.splice(newLen, oldLen);
      } else if (oldLen < newLen) {
        this.formData.push(...Array.from({ length: newLen - oldLen }, n => ({
          /* здесь дефолтные данные блока */
        })));
      }
    }

    Инпут, задающий количество блоков - длину массива с данными блоков цепляете к нему в качестве значения, а при изменении вызываете метод обновления данных:

    <input
      type="number"
      [ngModel]="formData.length"
      (ngModelChange)="updateFormData($event)"
    >

    Ну и вывод блоков:

    <div *ngFor="let item of formData;">
      <!-- здесь создаёте input'ы, цепляете к ним через [(ngModel)] свойства item'а -->
    </div>

    https://stackblitz.com/edit/angular-q534id?file=sr...
    Ответ написан
    Комментировать