0xD34F

&.facebook
    &::before
        background-color: #3b5998
    .fa
        color: #3b5998

Заменить на

&.facebook
    &::before
        background-color: #3b5998
    color: #3b5998

Аналогично и с остальными иконками.

const result = [...Array(5)].map(() => <p>hello, world!!</p>);

https://jsfiddle.net/kng72um9/

const className = 'здесь должен быть класс ваших input\'ов';

Получаем элементы:

const inputs = document.querySelectorAll(`.${className}`);

// или

const inputs = document.getElementsByClassName(className);

Собираем массив значений:

const values = Array.from(inputs, n => n.value);

// или

const values = Array.prototype.map.call(inputs, n => n.value);

// или

const values = [];
for (const n of inputs) {
  values.push(n.value);
}

// или

const values = [];
for (let i = 0; i < inputs.length; i++) {
  values[i] = inputs[i].value;
}

// или

const values = (function get(i, n = inputs.item(i)) {
  return n ? [ n.value, ...get(i + 1) ] : [];
})(0);

Вместо общего isActive добавьте такое свойство каждому элементу в arr, и меняйте его:

<div v-for="(n, i) in arr" class="block-calculations__panel">
  <span
    :data-col="i"
    :class="{ active: n.isActive }"
    @click="n.isActive = !n.isActive"
  ></span>
</div>

UPD. А, так вам надо, чтобы активным мог быть только один элемент... Переименуйте isActive в просто active, это будет индекс кликнутого элемента. Класс назначайте в случае равенства текущего индекса и active:

<div v-for="(n, i) in arr" class="block-calculations__panel">
  <span
    :data-col="i"
    :class="{ active: active === i }"
    @click="active = active === i ? null : i"
  ></span>
</div>

Попробуйте обновлять по значению столбца в обратном порядке: ORDER BY index DESC.

Нужно вывести это все в сетку по 4 элемента в строке <...> Не понятно как перебирая массив делать строки

Очевидно же - порезать массив на куски по 4 элемента, каждый будет представлять собой строку:

const { items } = this.state;
const inRow = 4;
const rows = Array.from(
  { length: Math.ceil(items.length / 4) },
  (n, i) => items.slice(i * 4, (i + 1) * 4)
);

И вместо исходного массива при рендеринге перебираете полученные куски:

{rows.map(n => (
  <div className="row">
    {n.map(m => <div>{m}</div>)}
  </div>
))}

https://jsfiddle.net/cmd7fyn3/

<input type="checkbox" :id="`checkbox-${item.key}`" :value="item.key" v-model="status">

array_combine

Я так понимаю, опять фантазируете вместо того, чтобы загуглить документацию. Чёрным по белому сказано же:

next transaction (subscription) cannot start until the previous completes

Хотите, чтобы было "независимо" - используйте merge вместо concat.

Замените $('.cart-window ul').each на $('.cart-window ul .item').each, а $(this).find('.item span').text() замените на $(this).find('span').text().

А то сейчас вместо того, чтобы перебирать .item'ы, вы обрабатываете сразу весь список, разом получая содержимое всех .item span'ов - естественно, строки склеиваются.

У меня получается создать коллекцию, но Ymaps и Map не имеют метода setBounds (выводил в console.log(ymaps) и console.log(map)).

В это я поверить не могу. Метод setBounds у map всё-таки есть - просто если метод не собственный, а принадлежит прототипу, то в консоли он не показывается.

Я хочу прямо в HTML написать <canvas id="threejs_here"> </canvas> и как-то назначить этот canvas для вывода рендера three.js

Нет проблем. Ставите своему canvas'у ref:

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

И указываете его при создании рендерера:

new THREE.WebGLRenderer({
  canvas: this.$refs.threejs,
})

Как-то так.

splat operator

str.replace(/\s+/g, '-')

Второй параметр в range - это количество элементов, а не конечное значение (как вам, по-видимому, показалось).

То есть, в первом случае последовательность такая: 1, 2, 3, 4, 5. А во втором такая: 0, 1, 2, 3, 4. Соответственно, 15 / 5 = 3, 10 / 5 = 2, всё правильно.

Вы computed засунули в data - что за бред?

Этот код вместо результата выводит undefined.

Под "выводит" вы подразумеваете результат вызова console.log, да? Что ж, ничего ваш код не выводит - console.log не вызывается ни разу, undefined возникает в консоли потому, что последнее, что вы делаете - вызываете метод subscribe, который ничего не возвращает.

Отсутствие вывода обусловлено пустотой массива result, а пуст он потому, что... Нет, не буду объяснять - разберитесь, как стрелочными функциями пользоваться, и найдите свои ошибки сами.

Кого надо обернуть:

const elements = document.querySelectorAll('.news-full-text img');

Оборачиваем:

for (const n of elements) {
  const el = document.createElement('div');
  el.className = 'image';
  el.appendChild(document.createElement('div'));
  el.lastChild.className = 'image-social';
  el.lastChild.textContent = 'социальные кнопки';
  n.insertAdjacentElement('afterend', el);
  el.insertAdjacentElement('afterbegin', n);
}

или

elements.forEach(n => n.outerHTML = `
  <div class="image">
    ${n.outerHTML}
    <div class="image-social">социальные кнопки</div>
  </div>
`);

Каждому элементу в uploads добавляете свойство val, которое и используете в v-model.

Таким образом, nextButtonDisabled заметно упроститься:

nextButtonDisabled() {
  return this.uploads.some(n => n.required && !n.val);
},

Отдельные же значения param1, param2, ... - выкидываете, вместо этого делаете computed свойство formData:

formData() {
  return this.uploads.reduce((acc, n) => (acc[n.name] = n.val, acc), {});
},