Антон Антон

Чтобы напрямую вызывать методы инстанса компонента, нужно методы сделать публичными. Для этого есть expose в Options API и defineExpose для Composition API

Child.vue

<script setup>
const foo = ref('foo')
const bar = () => console.log('bar')

defineExpose({
  foo,
  bar,
})
</script>

Parent.vue

<template>
  <Child ref="child" />
</template>

<script setup>
const child = ref(null);

onMounted(() => {
  console.log(child.value.foo)
  console.log(child.value.bar())
})
</script>

Т. е. без доработок код из этого репозитория не заработает

shell_exec + chromium с флагами headless disable-gpu и print-to-pdf отрисует вам что угодно, что может отобразить chrome.
у решения есть изъян - на большинстве хостингов даже не пытайтесь запустить, себе дороже, только виртуальные/физические сервера подходят идеально.

https://github.com/chrome-php/chrome - примерно так

Потому что мат часть нужно сначала учить, прежде чем во фреймворки суваться...

У Вас на container висит обработчик клика.
События, большинство, всплывают.
Сначала при клике срабатывает one
а потом changeTwo, висящий на container, где меняется всё обратно.

Соответственно, когда у Вас было при наведении, то и не было "конфликта" с обработчиком клика на container, так как это разные события.

Что делать - не делать такую жуткую кашу с вложенными "интерактивными элементами".
А если никак - то гуглить модифкатор .stop во vue или event.stopPropagation.

https://learn.javascript.ru/events

Поле должно быть добавлено в fillable атрибут.

1. Hover на всего родителя > все дети чёрного цвета.
2. Hover на ребёнка и он оранжевого цвета, за счёт специфичности он перебьет п1.

Используйте JSON_HEX_APOS или сделайте проще:

const dataJSONArray = <?php echo json_encode($u ,JSON_UNESCAPED_UNICODE); ?>;

Посмотрите в сторону вебкомпонентов

Статья по теме: https://learn.javascript.ru/property-descriptors

var globalVar = "Hello!";

Object.defineProperty(window, 'test', {
    get() { return globalVar } // ну и другие необходимые дескрипторы, опущены для примера.
});

console.log(test); // "Hello!"
globalVar = "world!";
console.log(test); // "world!"

P.s. но звучит так, будто Вы какую-то дичь делаете и нужно переосмыслить решение.

Замените в разметке на :view-box.camel="viewbox"
Кстати, я нагуглила ответ за 1,5 минуты.

Если в новом объекте должны быть все указанные свойства, вне зависимости от их наличия в исходном объекте:

// имена свойств можно передавать в виде массива
const pick = (obj, keys) => Object.fromEntries(keys.map(n => [ n, obj[n] ]));
const newObj = pick(obj, [ 'b', 'c' ]);

// или как отдельные значения
const pick = (obj, ...keys) => keys.reduce((acc, n) => (acc[n] = obj[n], acc), {});
const newObj = pick(obj, 'b', 'c');

Если отсутствующие свойства не нужны:

const pickExisting = (obj, keys) =>
  Object.fromEntries(keys.filter(n => n in obj).map(n => [ n, obj[n] ]));

Если нужны только собственные свойства:

const pickOwn = (obj, keys) =>
  keys.reduce((acc, n) => (Object.hasOwn(obj, n) && (acc[n] = obj[n]), acc), {});

Если хотим выбирать свойства не только по именам, но и по значениям:

const pick = (obj, filterFn) => Object.fromEntries(Object.entries(obj).filter(filterFn));

const obj1 = pick(obj, ([ k, v ]) => 'abc'.includes(k) && v % 2); // {a: 1, c: 3}
const obj2 = pick(obj, n => n[1] > 2); // {c: 3, d: 5}

let statuses = document.querySelectorAll('.M')
    statuses.forEach((item) => {
          if (item.innerText === 'Активен') {
            item.classList.add('Free')

          }
          if (item.innerText === 'Заблокирован') {
            item.classList.add('Blocked')

          }
        }
    )

ну не надо во вью такими извращениями заниматься, это так делается:

<MyStatus 
  class="M"
  :class="{'Free': item.Status==='Активен', 'Blocked': item.Status==='Заблокирован'}"
  style="width: 75%; padding: 0.25em 0.75em"
>
    {{ player.Status }}
</MyStatus>

Ну и по вопросу не понятно, что надо в button передать и откуда надо путь img взять

Вариант 1 (самый простой/дешманский): Делим участок на сегменты менее 100м, желательно чтобы стыки были в районе розеток. Покупаем самый дешевый обычный свитч DES/DGS-1005, подключаем и работаем
Вариант 2 (по дороже): Вариант 1, только вместо свитчей POE-коммутаторы(инжекторы)/удлинители. Если к местам стыков нет возможности подвести 220В
Вариант 3 (надежный/геморойный): Оптоволокно, если позволяют условия - можно купить готовый оконеченный патчкорд и протянуть, если нет - тянуть кабель и оконечивать. Любой провайдер подрядиться такое спроектировать/сделать.
Вариант 4. (в прямой видимости): WI-FI радиомост на направленных точках доступа/антенах. Ну не забиваем, что от каждой точки доступа до ближайшего свитча также может быть до 100м
Вариант 5. (когда проложить нет возможности): Использование технологий PLC (powerline) - подключение по существующей электропроводке, через спец адаптеры. VDSL - подключение по существующей прямой телефонной линии (1 паре)
Вариант 6. (арендный) При наличии на обоих концах точек присутствия провайдера. Заказать услугу темного волокна или mpls, объединение сетей
Вариант 7. (интернетный): При наличии на обоих концах точек присутствия провайдера. Объединение сетей через классический VPN.

.flex {
   --gap: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
}

.item {
   width: calc(50% - var(--gap) / 2);
   height: 100px;
   background-color: red;
}

Вам не класс нужно переключать на элементе, а включать и выключать слайдер, при достижении определенного брейкпоинта. Всё это дело можно легко решить с помощью matchMedia.

Вот небольшой пример:

const slider = $(".slider").slick({
     centerMode: true,
     slidesToShow: 4
});

const breakpoint = window.matchMedia("(max-width: 992px)");

const breakpointChecker = () => {
   if (breakpoint.matches) {
      slider.slick('init');
   } else {
      slider.slick('destroy');
   }
};

breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();

А вот для дополнительной стилизации контейнера, уже можно использовать медиа запросы в CSS.