0xD34F

Вы пытаетесь назначить обработчик события элементам, которых нет. Нет на момент назначения.

Поставьте код ниже элементов, или оберните его в $(function() { }), или воспользуйтесь делегированием:

$(document).on('change', 'input[type="radio"]', function() {
  $('.color').text($(this).val());
});

я открыл доселе неизвестный it-сообществу баг...

Ага, щас. Десять багов.

... или где-то далеко по мне плачет один учебник по js?

Так точно.

Замените setInterval(this.tick, interval); на

setInterval(this.tick.bind(this), interval);

или на

setInterval(() => this.tick(), interval);

Можно приводить к общему регистру строку, по которой выполняется поиск, и тексты элементов:

function setChecked(value) {
  value = value.toLowerCase();

  for (const n of document.querySelector('.u-combolist').children) {
    n.querySelector('input').checked = n
      .querySelector('label')
      .innerText
      .toLowerCase()
      .includes(value);
  }
}

Или, воспользоваться регистронезависимым регулярным выражением:

function setChecked(value) {
  let test = () => false;
  try {
    test = RegExp.prototype.test.bind(RegExp(value, 'i'));
  } catch (e) {}

  document.querySelectorAll('.u-combolist label').forEach(n => {
    n.previousElementSibling.checked = test(n.textContent);
  });
}

const $el = $('.field');
const el = document.querySelector('.field');

Теги должны остаться? Да:

$el.append(document.createTextNode(str));

// или

$el.append(new Text(str));

// или

$el.append(str.replace(/</g, '&lt;'));

// или

el.append(str);

Нет:

$el.append($(str).text());

// или

const div = document.createElement('div');
div.innerHTML = str;
el.insertAdjacentText('beforeend', div.innerText);

// или

el.append(document.createRange().createContextualFragment(str).textContent);

// или

el.append(new DOMParser().parseFromString(str, 'text/html').body.textContent);

Стили для раскрашивания клеток:

.black { background: black; }
.white { background: white; }

Размеры доски:

const rows = 8;
const cols = 8;

Создавать доску можно через генерацию разметки:

document.querySelector('.info').innerHTML = `
  <table>${Array.from({ length: rows }, (_, i) => `
    <tr>${Array.from({ length: cols }, (_, j) => `
      <td class="${(i ^ j) & 1 ? 'black' : 'white'}"></td>`).join('')}
    </tr>`).join('')}
  </table>`;

Или, создавая её элементы напрямую:

const table = document.createElement('table');

for (let i = 0; i < rows; i++) {
  const tr = table.insertRow();
  for (let j = 0; j < cols; j++) {
    tr.insertCell().classList.add([ 'white', 'black' ][(i ^ j) & 1]);
  }
}

document.querySelector('.info').append(table);

например

Анимируйте элементы независимо, вместо общего селектора передавайте в to конкретный элемент. Например:

const
  ease = Power0.easeNone,
  yoyo = true;

document.querySelectorAll('svg').forEach((n, i) => {
  const
    TopWave = new TimelineLite(),
    el = n.querySelector('.wave'),
    delay = i * (1 + Math.random() * 2);

  TopWave
    .to(el, 8, { delay, morphSVG: '.wave-one',   yoyo, ease })
    .to(el, 7, { delay, morphSVG: '.wave-two',   yoyo, ease })
    .to(el, 8, { delay, morphSVG: '.wave-three', yoyo, ease,
      onComplete: () => TopWave.restart()
    });
});

computed: {
  coordinates() {
    return this.$store.getters[`currency/${this.type}`];
  },
},

UPD.

передаю type: <component :type=" 'string' "></compontent>

А зачем такие сложности? Достаточно просто type="string".

.test1, .test2, .test3 - убрать цифры, пусть везде будет просто .test

const output = document.querySelector('#classlist');
const container = document.querySelector('.wrapper');
const rowSelector = '.test';
const key = 'test';
const itemSelector = `[data-${key}]`;

container.addEventListener('click', function({ target: t }) {
  if (t = t.closest(itemSelector)) {
    const toRemove = Array.prototype.reduce.call(
      t.closest(rowSelector).querySelectorAll(itemSelector),
      (acc, n) => (n !== t && acc.push(n.dataset[key]), acc),
      []
    );

    this.classList.remove(...toRemove);
    this.classList.toggle(t.dataset[key]);

    output.textContent = this.classList;
  }
});

Укажите tickFormat для xAxis:

.tickFormat(d3.timeFormat('%d %B'))

UPD. Дату надо указывать в миллисекундах, домножьте свои значения на 1000.

Какое-то отдельное свойство для самого канваса не нужно - он доступен через ref.

Контекст - получаете после монтирования:

<canvas ref="canvas"></canvas>

data: () => ({
  ctx: null,
}),
mounted() {
  this.ctx = this.$refs.canvas.getContext('2d');
},

Ну и используете его:

methods: {
  updateCanvas() {
    const { ctx } = this;
    ...

Начать следует с получения из json'а массива:

const { items } = JSON.parse(json).response;

Дальше два пути.

Первый - собираем html:

const html = `
  <tbody>${items.map(n => `
    <tr>
      <td>${n.title}</td>
      <td>${n.director}</td>
      <td>${n.year}</td>
      <td>${Object.values(n.photo).map(m => `<img src="${m}">`).join('')}</td>
    </tr>`).join('')}
  </tbody>
`;

Который затем добавляем в таблицу:

$('#example').append(html);
// или
document.querySelector('#example').insertAdjacentHTML('beforeend', html);

Второй - создаём элементы напрямую:

items.forEach(function(n) {
  const tr = this.insertRow();
  tr.insertCell().textContent = n.title;
  tr.insertCell().textContent = n.director;
  tr.insertCell().textContent = n.year;
  tr.insertCell().append(...Object.values(n.photo).reduce((acc, m) => (
    (acc[acc.length] = new Image).src = m,
    acc
  ), []));
}, document.getElementById('example').createTBody());

например

пробросить метод компонента Menu в качестве параметра компоненту Button

Не надо так.

Пусть Button генерирует событие клика, на которое вы подпишитесь в App и в обработчике измените какое-то свойство, которое в качестве параметра передаётся в Menu, где вы в зависимости от значения этого параметра будете предпринимать нужные действия (пример). Накрайняк - поставьте ref на экземпляр Menu и в обработчике клика напрямую дёргайте интересующий вас метод (пример).

preg_match_all('/\-?\d+/', $str, $matches);
$numstr = implode(' ', $matches[0]);

например, jquery-ui datepicker:

$('input').datepicker({
  beforeShowDay: date => [ date.getDay() === 6 ],
});

или, air-datepicker:

$('input').datepicker({
  onRenderCell: (date, cellType) => ({
    disabled: cellType === 'day' && date.getDay() !== 6,
  }),
});

@media (max-width: 1024px) {
  .list-group-service {
    columns: 2;
  }
}

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

UPD. Вынесено из комментариев:

это же мультиселект, и когда выбрано два элемента, то имена двух элементов и получаем, а мне нужно только тот который выбрали

$('select').on('click', 'option', function(e) {
  const $target = $(e.target);
  if ($target.is(':selected')) {
    console.log($target.text());
  }
});

или

let prevSelected = [];

$('select').on('change', function(e) {
  const selected = $(':selected', this).get().map(n => n.innerText);
  const newSelected = selected.find(n => !prevSelected.includes(n));
  prevSelected = selected;

  if (newSelected) {
    console.log(newSelected);
  }
});