z_u_l

Вместо прямого добавления/удаления класса сделайте динамическую привязку в зависимости от текущего значения инпута. Чтобы упростить повторное использование, сделайте компонент: принимает в качестве параметров значение и плейсхолдер, при редактировании пользователем инпута выбрасывает соответствующее событие с новым значением.

props: [ 'value', 'placeholder' ],

<div>
  <input
    :class="value ? 'input_filled' : ''"
    :value="value"
    @input="$emit('input', $event.target.value)"
  >
  <span>{{ placeholder }}</span>
</div>

https://jsfiddle.net/2415wkmg/

Сложно это всё. Четыре селекта - очень похожие, четыре вычисляемых свойства - очень похожие. Многовато копипасты. Надо упростить.

Первым делом внимательно посмотрим на все эти похожие куски кода, найдём, где они отличаются, и на основе этих отличий сделаем описание фильтров:

filters: [
  { name: 'calculator.brand_filter', getter: obj => obj.brand.name, value: '' },
  { name: 'calculator.company_filter', getter: obj => obj.company.name, value: '' },
  { name: 'calculator.country_filter', getter: obj => obj.brand.country, value: '' },
  { name: 'calculator.side_filter', getter: obj => obj.sides, value: '' },
],

Затем сделаем собственно фильтрацию, пропустим данные через массив фильтров (если значение фильтра выставлено - производится фильтрация, нет - оставляем данные как есть):

computed: {
  filteredProfiles() {
    return this.filters.reduce((profiles, { value, getter }) => {
      return value
        ? profiles.filter(n => getter(n) === value)
        : profiles;
    }, this.profiles);
  },

Далее, надо дать пользователю возможность задавать значения фильтров. Сделаем компонент фильтра:

Vue.component('filter-select', {
  props: [ 'name', 'options', 'value' ],
  template: `
<div>
  <p>{{ name }}<p>
  <select :value="value" @change="$emit('input', $event.target.value)">
    <option value="">-</option>
    <option v-for="n in options">{{ n }}</option>
  </select>
</div>`
});

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

computed: {
  filterOptions() {
    return this.filters.map(n => [...new Set(this.profiles.map(n.getter))]);
  },

Наконец, создадим сами фильтры:

<filter-select
  v-for="(n, i) in filters"
  v-model="n.value"
  :options="filterOptions[i]"
  :name="trans(n.name)"
></filter-select>

Также не будем забывать про обнуление значений фильтров. Так что вот метод сброса фильтров и кнопка, по клику на которую он будет вызываться:

methods: {
  resetFilters() {
    this.filters.forEach(n => n.value = '');
  },

<button @click="resetFilters">{{ trans('calculator.reset_filter') }}</button>

Демо можно посмотреть здесь (да, тут меньше фильтров, чем у вас - ну так вы свои данные не показали, а у меня воображения на большее не хватило).

let toBlock = document.querySelector('.section').getBoundingClientRect().top;
                console.log(toBlock);  (высота до до блока)

window.addEventListener('scroll', () => {
window.scrollTo({
    top: toBlock,
    behavior: "smooth"
});
})

по итогу выполнения можно сделать removeEventListener и скроллить куда душе угодно

Вот пример
https://codepen.io/begprod/pen/abbaMgX

вот пример

document.querySelectorAll('.container').forEach(n => {
  const slider = new Swiper(n.querySelector('.product-slider'), {
    navigation: {
      nextEl: n.querySelector('.swiper-button-next'),
      prevEl: n.querySelector('.swiper-button-prev'),
    },
    spaceBetween: 10,
  });

  const thumbs = new Swiper(n.querySelector('.product-thumbs'), {
    spaceBetween: 5,
    centeredSlides: true,
    slidesPerView: 4,
    touchRatio: 0.2,
    slideToClickedSlide: true,
    direction: 'vertical',
  });

  slider.controller.control = thumbs;
  thumbs.controller.control = slider;
});

Вот ты с выделением ячейки справился. Молодец. Теперь задай для выделенной ячейки 8 теней синего цвета и позиционируй как надо.

input[type="radio"]:checked + label {
    background: #FF0000;
    box-shadow: 60px 30px 0 0 blue, 60px -30px 0 0 blue;
    position: relative;
    z-index: 1;
}

Можешь даже анимацию задать для тени

label {
    transition: ease box-shadow .3s;
}

$browser-context: 16; // Default

@function rem($pixels, $context: $browser-context) {
  @return #{$pixels/$context}rem;
}

кастомные свойства для иконки прописал...

...не там, где надо. Перенесите из properties в options (третий параметр вместо второго).

$('#phone').on('change', function(){
  var count = ($('#phone').val().match( /\d+/g ).join('')).length;
  console.log(count);
});

Это означает, что для ие11 надо отдельно прописывать стили, начиная с самого определения display:gird;
и ниже: display: -ms-grid;
ну и все свойства дублировать для ие.
Это несложно, но надо повозиться, потом привыкнете.
К примеру, для него нет grid-gap, все отступы прописываются явно, как отдельная колонка.
Как то так

.startGrid {
	display: -ms-grid;
	-ms-grid-columns: 32% 20px 32% 20px 32%;
	-ms-grid-rows: auto 20px auto 20px auto;

}
В этом примере 3 колонки, 2 ряда, между ними по 20 px отступы.
Что неясно легко гуглится по -ms-grid

Когда ты используешь querySelectorAll ты получаешь все элементы и тебе нужно пройти их и добавить к каждому анимацию.
svg1.forEach(function(el){
el.style.color = 'red';
});
вот так покрасит все твои элементы в красный. Так же ты можешь применить и анимацию.

document.querySelector('.selectTime').addEventListener('change', function() {
  const values = Array.from(this.querySelectorAll('select'), n => n.value);
  values[0] = `${-~values[0] % 24}`;

  document.querySelector('куда там вам надо записать время').innerText = values
    .map(n => n.padStart(2, 0))
    .join(':');
});

<div class="accordionFaq"></div>

const playersOptions = [
  { source: '...' },
  { source: '...' },
  ...
];

$('.accordionFaq').html(playersOptions.map((n, i) => `
  <div class="accordionFaq-item">
    <div class="accordionFaq-head js-accordionFaq-head">
      Video #${i}
    </div>
    <div class="accordionFaq-body">
      <div id="player${i}"></div>
    </div>
  </div>
`).join('')).on('click', '.accordionFaq-head', function(e) {
  const index = $(this).closest('.accordionFaq-item').index();

  $('.accordionFaq-item', e.delegateTarget).each(function(i) {
    const
      $this = $(this),
      isClicked = i === index,
      active = isClicked && !$this.hasClass('active');

    $(this)
      .toggleClass('active', active)
      .find('.accordionFaq-body')
      [isClicked ? 'slideToggle' : 'slideUp']();

    playersOptions[i].player[active ? 'play' : 'pause']();
  });
});

playersOptions.forEach((n, i) => {
  n.player = new Clappr.Player({
    source: n.source,
    parentId: `#player${i}`,
  });
});

sysadm.pp.ua/linux/nalashtuvannya-zruchnogo-ssh-do...

var pos = this.getAttribute('data-goto'); 

myMap.panTo(pos, {

data-goto="[59.938531, 30.313497]"

Как подсказывает документация, метод panTo в качестве координат ожидает массив чисел, в то время как вы подсовываете строку.

Поскольку строка представляет собой корректный JSON, который, в свою очередь, представляет собой требуемый массив, то заставить всё работать как надо - дело тривиальное:

this.getAttribute('data-goto') ---> JSON.parse(this.dataset.goto)

class: $this.children('option').eq(i).attr('class');

$(this).find('option').each(function(index, elem){
  $('<li />', {
       text: $(this).text(),
       class: $(this).attr('class')
  }).appendTo($list);
});

как то так наверно

$(".owl-carousel .active").prev().text()
$(".owl-carousel .active").next().text()

https://jsfiddle.net/mn0z4fu5/

$('select').select2({
  minimumResultsForSearch: Infinity,
  dropdownParent: $('.card-more'),
});