0xD34F

Я хочу прямо в 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), {});
},

Ну, очевидно, v-for имеет более высокий приоритет, вот и выполняется в обоих случаях.

Что делать? Добавьте элементу с v-for обёртку, в которую и перенесите v-if.

SELECT *
FROM table_name
WHERE (column_name->>'product_id')::integer IN (1,2,3,4,5,6,7,8,9,10)

можно:

input {
  color: transparent;
  text-shadow: 0 0 0 black;
}

Единственная странность, chrome после прилета данных выводит в консоль false черным цветом, а после изменения с помощью событий(по щелчку) - синим.
В чем может быть проблема?

Это хорошо, что вы обратили внимание на цвет - в первом случае у вас "false" (строка, поэтому оно и "всегда правда"), во втором false (boolean).

"Рендерить его по другому" - подход неверный.

Надо разделять предустановленные значения, и те, что вводит пользователь. Так что просто числа хранить уже не получится - наверное, стоит сделать объект, который содержит в себе значение ячейки и её disabled. Как-то так.

rootVueSteplist.$data = Object.assign(rootVueSteplist.$data, response.data)

Присваивание не нужно. Object.assign модифицирует объект, переданный первым аргументом. Т.е., достаточно просто

Object.assign(rootVueSteplist.$data, response.data);

Или даже Object.assign(rootVueSteplist, response.data);, ведь как нам докладывает документация про $data,

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

Пытался нагуглить, но самостоятельно разобраться в простыне кода не могу.

Что-то вы странное нагуглили - на всё про всё строчек десять, никакой "простыни".

Вычисляете координаты начала текущего блока, затем обходите его (два цикла, один вложен в другой, от начальных координат до начальных + 3). Типа так.

Делал так:

{{#each array}}
        {{#each this}}
            {{@index}} {{this}}
        {{/each}}
{{/each}}

А что такое array? Такого свойства у вас в json'е нет. Пишите this.

Как получить ключи из products внутри компонента? По идее, их вроде бы надо объявить в props

А чо не объявили-то?

вылетает ошибка

Очень информативно. Для ясновидящих.

products: [];

Уверены, что тут должна быть точка с запятой? Возможно, вместо того, чтобы обламывать зубы на использовании фреймворков, вам следует изучить основы языка?

Так, теперь что делать:

1. Указываете ключ из products в props, его же используете в шаблоне:

Vue.component('cart-item', {
  props: [ 'product', 'productKey' ],
  template:'<div>{{ product }} {{ productKey }}</div>',
});

2. Также несколько иначе будет выглядеть ваш v-for:

<cart-item
  v-for="(product, key) in products"
  :product="product"
  :product-key="key"
  :key="key"
></cart-item>

UPD. Возможно, стоит сделать products массивом по получении данных, и ключи - свойствами элементов массива. Тогда не придётся передавать в компонент дополнительный параметр.

Как опознать блоки со спойлерами, а также заголовки и контент у них внутри; какой класс надо переключать; как контент должен изменять свою видимость. Ну и сама логика переключения видимости контента - при закрытии спойлеров не надо обрабатывать текущий, т.е., инвертировали состояние кликнутого, взяли все, отбросили кликнутый, закрыли:

const containerSelector = '.spoiler-container';
const headerSelector = '.spoiler-header';
const contentSelector = '.spoiler-content';
const activeClass = 'active';
const toggleEffect = 'slideToggle'; // или fadeToggle, или toggle
const hideEffect = 'slideUp'; // или fadeOut, или hide

function toggle($containers, $container) {
  $containers
    .not($container)
    .removeClass(activeClass)
    .find(contentSelector)
    [hideEffect]();

  $container
    .toggleClass(activeClass)
    .find(contentSelector)
    [toggleEffect]();
}

Обработчик клика подключается блокам со спойлерами, но клики слушаться будут только по заголовкам:

const $containers = $(containerSelector).on('click', headerSelector, e => {
  toggle($containers, $(e.delegateTarget));
});

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

$(document).on('click', `${containerSelector} ${headerSelector}`, e => {
  toggle($(containerSelector), $(e.target).closest(containerSelector));
});