Junior Development

Раз передаёте как application/json, значит стандартный массив $_POST не будет заполняться. Надо принимать данные самостоятельно.

$json = file_get_contents('php://input');
$data = json_decode($json, true);

:style="mapStyles"

data() {
  return {
    mapStyles: {
      styles: [

Во-первых - не очень понятно, откуда вы взяли, что стили должны быть объектом, содержащим свойство styles. В документации есть ссылка на конструктор стилей - он выдаёт просто массив, без обёртки в виде объекта.

Во-вторых - компонент карты не имеет параметра style. То есть, документация врёт. Да, так бывает. Зато есть параметр options, частью которого стили и являются. Так что вам следует заменить

mapStyles: { на options: {

:style="mapStyles" на :options="options"

Ну и ещё стоит убедиться, что api key есть - без него стили применяться не хотят.

Подключаю этот плагин
https://github.com/river-lee/vue-fullpage#options

Переходим по ссылке, видим, что этот плагин

based on vue@2.x

Затем смотрим показанный вами код:

import { createApp } from 'vue'

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

Здесь становится очевидным, что вам доступны четыре варианта действий:

1. Понизить используемую версию vue
   
2. Дождаться, когда автор плагина сделает версию под vue 3
   
3. Форкнуть репозиторий, допилить под vue 3 самостоятельно
   
4. Отказаться от использования данного плагина, найти какой-нибудь другой
   

const parent = document.querySelector('.parent');
Array.from({length: 10}, (_, i) => (
  parent.appendChild(document.createElement('div')).textContent = i + 1
));

<div class="parent"></div>

document.querySelector('.parent').innerHTML = [...Array(10)].map((_, i) => `<div>${i + 1}</div>`).join('')

Нет

<?php
$var = '{
  "features": [
    {
      "id": 0,
      "category": [ 6, 7,  8 ]
    },
    {
      "id": 1,
      "category": [ 1, 2, 3 ]
    }
  ]
}';

$decoded = json_decode($var, true);


foreach($decoded['features'] as $item) {
    
    foreach($item['category'] as $cat) {
        echo $cat;
    }
}
// 678123

Где кнопки находятся, что за кнопки, что делать при клике:

const container = document.querySelector('.buttons');
const buttonSelector = '.button';
const onButtonClick = button => console.log(button.id);

Делегирование, обработчик клика добавляем контейнеру с кнопками. Пробуем найти у элемента, где случился клик, предка, который является кнопкой:

container.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    onButtonClick(button);
  }
});

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

container.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => onButtonClick(e.currentTarget));

let txt = `либо текст и\xA0ещё текст`;

А почему не новую версию?

В новой версии это всё делается так, как тебе и надо

Здесь проблема со структурой. Если атрибут относится к категории, он должен быть внутри её модели, а не отделен от неё. Поэтому и не получается обратиться сразу к двум свойствам из одного цикла, плюс возникает сложность по определению соответствий атрибутов и названий категорий.

Текущую структуру можно вывести так:

const testdata = [
            {
                category: ['Категория-1_1', 'Категория-2_1','Категория-3_1',],
                attr: [ 'attr1', 'attr2', 'attr3'],
            },
            {
                category: ['Категория-1_2', 'Категория-2_2','Категория-3_2',],
                attr: [ 'attr1', 'attr2', 'attr3'],
            }
        ];

const templates = testdata.reduce((acc, item) => {
  return acc.concat(...item.category.map((category, index) => {
    const attr = item.attr[index] || '';
    return `<button class='category-btn' data-categoty='${attr}'>${category}</button>`;
  }));
}, []);

На выходе будет массив:

0: "<button class='category-btn' data-categoty='attr1'>Категория-1_1</button>"
1: "<button class='category-btn' data-categoty='attr2'>Категория-2_1</button>"
2: "<button class='category-btn' data-categoty='attr3'>Категория-3_1</button>"
3: "<button class='category-btn' data-categoty='attr1'>Категория-1_2</button>"
4: "<button class='category-btn' data-categoty='attr2'>Категория-2_2</button>"
5: "<button class='category-btn' data-categoty='attr3'>Категория-3_2</button>"

Если вы уверены в точности формата ссылки, то токен можно получить в глобальную переменную. А потом эту переменную вставить в вашу функцию.

var link = 'group.ru/&direct-crm-ticket=[тикет аутентификации клиента]';

var token = link.split('=')[1].trim();

console.log(token);

Но это плохой путь, лучше сделать функцию-обёртку и передавать через ее параметр.

function wrapper(token) {
mindbox("async", {
  operation: "GoToTheUnsubscriptionPage",
  data: {
    customer: {
      authenticationTicket: token,
      subscriptions: [
        {
          pointOfContact: "SMS",
          isSubscribed: "false"
        }
      ]
    }
  },
  onSuccess: function() { },
  onError: function(error) { }});
}

wrapper(token);

Что делать с этими ключами?

На этот вопрос должна ответить документация вашей апишки.

Как правильно написать запрос?

Следуйте документации.

Друзья, буду благодарен за пример!

Современный, Несовременный и jQuery, и ещё целая статья

Структуру данных сделай по другому, так проще будет

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

www.font2web.com
Прогнал ttf через этот сервис и всё получилось

1. (elem, index, arr) второй и третий параметр необязательны.
2. .innerHTML — перезаписывает в тот же элемент все, что ты выводишь. Используй appendChild хотя бы.