0xD34F

Начал изучать VueJS. Читал документацию очень много и долго.

Начните лучше с изучения просто JS, без Vue. Читайте, очень много и долго. Чтобы вот такого вот не было:

new Vue.component

Вы конечно же без понятия, что такое "new", и зачем оно тут нужно (не нужно).

Заворачиваете список в transition-group и анимируете изменение размеров элементов списка при их появлении/исчезновении. Например.

Ищем готовое или реализовываем самостоятельно:

function throttle(f, delay) {
  let lastCall = -Infinity;

  return function() {
    const now = +new Date;
    if (now - lastCall > delay) {
      lastCall = now;
      return f.apply(this, arguments);
    }
  };
}

date_create(2019-05-16)

Кавычки забыли, получается 1998 год. Отсюда и почти восемь тысяч дней разницы.

$keys = array_keys($arr);

$head = "<tr><th>year</th>".implode("", array_map(function($n) {
  return "<th>$n</th>";
}, $keys))."</tr>";

$rows = implode("", array_map(function($key) use($arr) {
  return "<tr><td>$key</td>".implode("", array_map(function($n) use($key) {
    return "<td>$n[$key]</td>";
  }, $arr))."</tr>";
}, array_keys($arr[$keys[0]])));

echo "<table>$head$rows</table>";

Object.entries(props).filter(n => n[1]).map(n => n[0]).join(',')

// или

`${Object.entries(props).reduce((acc, [ k, v ]) => (v && acc.push(k), acc), [])}`

// или

Object.entries(props).map(n => n[1] && n[0]).filter(Boolean).toString()

// или

'' + Object.keys(props).reduce((acc, n) => props[n] ? [ ...acc, n ] : acc, [])

// или

String(Object.keys(props).filter(n => props[n]))

Object.values(db).map(Object.values).flat(2).map(n => n.filename)

https://jsfiddle.net/1z2hbamc/

let arrays: [[String]] = [array1, array2]
var combinations: [[String]] = []

let arraysLen: Int = arrays.count
let arrLen: Int = arrays[0].count
let numCombinations: Int = Int(pow(Double(arraysLen), Double(arrLen)))

for i in (0 ..< numCombinations) {
  var combination: [String] = []
  for j in (0 ..< arrLen) {
    let arrIndex: Int = i / Int(pow(Double(arraysLen), Double(j))) % arraysLen
    let elIndex: Int = arrLen - j - 1
    combination.insert(arrays[arrIndex][elIndex], at: 0)
  }
  combinations.append(combination)
}

Цвета сложить в массив:

const colors = [ 'red', 'lime', 'yellow', 'aqua', 'brown', 'magenta' ];

Перебрать элементы, использовать индекс для получения цвета:

$('.item').css('background-color', i => colors[i % colors.length]);

// или

document.querySelectorAll('.item').forEach((n, i) => {
  n.style.backgroundColor = colors[i % colors.length];
});

Потому что контекст потеряли. Правильно будет так:

this.sliderPoint.on('click', e => {
  this.currentImg = e.target.dataset.id;
  this.scrollImages(this.currentImg, this.speed);
});

Ещё исправить создание разметки самих кнопок тоже надо - data-id неправильные, да и в целом дичь какая-то. Делайте так:

[...Array(count)].map((n, i) => `<div class="slider-point" data-id="${i}"></div>`).join('')

ИЛИ

Можно вообще не использовать data-атрибут для указания номера слайда:

Array(count).fill('<div class="slider-point"></div>').join('')

А вычислять его в обработчике клика:

this.currentImg = $(e.target).index();

if ($i % 4 < 2) {

или

if (!($i & 2)) {

const reg = /^money_\d+(_\w+)?$/;

// подходят
console.log([
  'money_1',
  'money_22',
  'money_3_a',
  'money_0_xxx666'
].map(n => reg.test(n)));

// не подходят
console.log([
  'honey_1',
  'money_q2',
  'money_3~a',
  '!money_0_xxx666'
].map(n => reg.test(n)));

Вычисляемое свойство будет представлять собой объект из стейта, завёрнутый в Proxy, чтобы перехватывать установку значений свойств и вызывать мутацию:

user() {
  return new Proxy(this.$store.state.user, {
    set: (target, prop, value) => {
      this.$store.commit('updateUser', { [prop]: value });
      return true;
    },
  });
},

Соответственно, сама мутация:

updateUser(state, payload) {
  Object.assign(state.user, payload);
},

https://jsfiddle.net/jgv3h15k/

document.addEventListener('click', e => {
  const slide = e.target.closest('.slide');
  if (slide) {
    const index = Array.prototype.indexOf.call(
      slide.parentNode.children,
      slide
    );
    console.log(index);
  }
});

или

for (const n of document.querySelectorAll('.slide')) {
  n.addEventListener('click', onClick);
}

function onClick() {
  let index = 0;
  for (let el = this; el = el.previousElementSibling; index++) ;
  console.log(index);
}

или

document.querySelectorAll('.slider').forEach(function({ children }) {
  [].forEach.call(children, (n, i) => {
    n.dataset.index = i;
    n.addEventListener('click', this);
  });
}, e => console.log(+e.currentTarget.dataset.index));

Считаем количество слайдов:

const slidesCount = this.slider.find('.slide').length;
// или
const { length: slidesCount } = this.slider.children();

Разметка одной точки:

const dotHTML = '<div class="slider-point"></div>';

Размножаем её:

const dotsHTML = Array(slidesCount).fill(dotHTML).join('');
// или
const dotsHTML = Array(slidesCount + 1).join(dotHTML);
// или
const dotsHTML = dotHTML.repeat(slidesCount);

И добавляем куда надо:

this.slider.siblings('.slider-pagination').append(dotsHTML);
// или
this.slider.closest('.slider-box').find('.slider-pagination').html(dotsHTML);

beforeMount() { // какой тут хук использовать?
  const fields = ['input1', 'input2']

  fields.forEach(item => this[item] = '') // я правильно добавляю в this, а не в this.$data?
}

Никакой хук не использовать. Всё неправильно.

С одной стороны, разницы нет, куда стучаться, к экземпляру, или к $data, т.к. последний представляет собой

Объект с данными, над которым экземпляр Vue осуществляет наблюдение. Экземпляр проксирует сюда вызовы своих полей. (Например, vm.a будет указывать на vm.$data.a)

С другой стороны, пытаться туда что-то добавлять бессмысленно, потому что

Vue не может обнаружить добавление или удаление свойства. Так как Vue добавляет геттер/сеттер на этапе инициализации экземпляра, свойство должно присутствовать в объекте data для того чтобы Vue преобразовал его и сделал реактивным.
<...>
Во Vue нельзя динамически добавлять новые корневые реактивные свойства в уже существующий экземпляр.

Массив сделайте:

data: () => ({
  inputs: Array(20).fill(''),
}),

<div v-for="(n, i) in inputs">
  Значение #{{ i }}:
  <input v-model="inputs[i]">
  {{ n }}
</div>

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

Привяжите контекст (по аналогии с методами swipeStatus и keyboardHandler):

this.previousImage = this.previousImage.bind(this);
this.nextImage = this.nextImage.bind(this);

Исправьте поиск кнопок (они находятся на одном уровне с контейнером слайдов, от которого вы пляшете, так что сначала надо подняться на уровень выше или вместо find использовать siblings; и селекторы ещё неправильные):

this.prevBtn = this.slider.siblings(".slider-btn.previous");
this.nextBtn = this.slider.siblings(".slider-btn.next");

if($(this).children().is(':checked')){
  $(this).addClass('active');
} else {
  $(this).removeClass('active');
}

Подобный код имело бы смысл использовать, будь у вас чекбоксы. У радиокнопок же повторный клик не приводит к смене состояния - они всегда после клика будут checked. Так что класс добавлять надо без всяких проверок. И удалять тоже без проверок - но у соседей, а не кликнутого элемента. Т.е., правильно будет так:

$(this).addClass('active').siblings().removeClass('active');