0xD34F

Не указан border-style.

Вообще, можете их все вместе указывать: border: 2px solid #ccc;.

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

Добавляете свойство showSpinner. Перед запросом делаете:

this.showSpinner = true

После получения ответа:

this.showSpinner = false

В шаблоне, соответственно:

<div class="spinner" v-if="showSpinner"></div>

Посмотреть живьём.

Ну, очевидно же - не надо полагаться на чётность счётчика. Да ещё и выглядит оно стрёмно, код-то для обоих случаев почти одинаковый. Можно положить картинки в массив, и на каждом шаге делать ему reverse. И вместо обращения к картинкам непосредственно - обращаться к элементам массива. Типа так.

Сделайте объект: то, с чем сравниваете, будет именами свойств; то, что выводите, будет их значениями; то, что проверяете - ключ, по которому будет извлекаться значение. Если ничего не получили, подставляете дефолтное значение. Типа вот так:

alert(({
  1: 'b',
  2: 'c',
})[a] || 'd');

Если вдруг среди значений будут такие, чьим логическим эквивалентом является false, то извлекайте значение из объекта только в том случае, если ключ существует:

const obj = {
  1: 'b',
  2: 'c',
  7: null,
  8: NaN,
};
const defaultValue = 'd';

alert(obj.hasOwnProperty(a) ? obj[a] : defaultValue);

Потому что есть правило, имеющее больший приоритет. Погуглите "специфичность селекторов css".

Погуглил за вас:

https://github.com/ssthouse/tree-chart
https://github.com/walkerz88/vue-family-tree
https://github.com/tower1229/Vue-Tree-Chart
https://github.com/David-Desmaisons/Vue.D3.tree
https://github.com/megafetis/vue3-blocks-tree

str.replace(/[\s.,%]/g, '')

/^[^.]*audio[^.]*$/

Раз:

<div class="budget-value"></div>

Два:

budget_value = document.getElementsByClassName('budget_value')[0]

Три:

budget_value.textContent = money

Понятно, да - перепутали подчёркивание с минусом, в результате элемент оказался undefined, и вы этому undefined пытаетесь назначать свойство.

preg_match_all('/test."([\w\/]+\.php)"/', $str, $matches);
$matches = array_pop($matches);

результат времени как при параллельном выполнении

А почему как? Они у вас выполняются параллельно. Чтобы было последовательно - второй должен создаваться в then первого.

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

Получается что new Promise( уже запускает на выполнение код? Его можно как то отложить?

Можно сделать getA и getB функциями, возвращающими промисы - тогда будет как вы хотите:

const getA = () => new Promise((resolve, reject) => {
    console.time('getA');
    setTimeout(() => {
        console.timeEnd('getA');
        resolve(4)
    }, 6000)
});

const getB = () => new Promise((resolve, reject) => {
    console.time('getB');
    setTimeout(() => {
        console.timeEnd('getB');
        resolve(2)
    }, 2000)
});


console.time('get sum');
getA().then(a => {
    getB().then(b => {
        console.log(`result: ${a + b}`);
        console.timeEnd('get sum');
        })
    });

UPD. Cabac_B недоумевает в комментариях по поводу "выполняются параллельно":

Среда исполнения JS уже умеет параллельно?

Ну не буквально же параллельно, и не буквально выполняются - смотрите код, о котором идёт речь. Имелось в виду, что оба промиса ждут своего разрешения одновременно.

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

let money,
    price,

Ну пожалуйста, добавьте точку, не хватает точки, добавьте-добавьте-добавьте, чтобы стало так:

let money,
    price;

Почему ключи заменяются? - потому что так работает array_merge:

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

Используйте оператор +, чтобы значения ключей остались неизменными:

$result = $array1 + $array2;

У вас обработчик mousemove вешается на перемещаемый элемент - естественно, что при выходе курсора за пределы элемента перемещение прекращается. А во втором примере, где всё окей - там обработчик mousemove вешается на document.

можно открыть в конце концов build.js и увидеть там...

Да плевать. Главное, чтобы ваш бэкенд не позволял делать лишнего пользователям с недостаточными правами.

Другое дело что загружать код, который заведомо не должен исполняться - излишне, так что имеет смысл разбить ваш build.js на несколько частей.

Консоль говорит, что не может найти product, потому что я не правильно использую хуки.

Нет. Консоль вам говорит что-то другое.

Вот эта вот строка,

var prod = product;

- что вы хотели ею сказать? Что ещё за product? Это который в data лежит? Тогда должно быть this.product. Почему вы пытаетесь определить переменную с таким же именем как и у параметра? А при вызове в хуке mounted - почему ничего не передаёте в метод results, у него же определён параметр?

Думаю, должно быть так: строку, процитированную выше - просто удаляете, а в mounted при вызове results передавайте ему product - this.results(this.product). Или так: строку удаляете, удаляете параметр prod, в вызове axios.get вместо prod используете this.product.

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

Собираем массив с днями:

const days = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];

// или

const days = Array.from({ length: 7 }, (_, i) => new Date(1, 0, i)
  .toLocaleString('ru', { weekday: 'long' })
  .replace(/./, m => m.toUpperCase()
));

Зацикливаем вывод:

for (
  let iDay = 0;
  confirm(`${days[iDay]}. Хотите увидеть следующий день?`);
  iDay = (iDay + 1) % days.length
) ;