0xD34F

preg_match('\/\/.+\?', $embed, $matches);

Разделители где?

echo $matches;

Это массив, так что $matches[0]

Так что надо-то - задавать карточкам различные стили (а это и есть "переключение вида"), или переключаться между разными наборами карточек (которые вы показали в песочнице)?

function updateFraction(slider) {
  const { params, activeIndex } = slider;

  slider.$el
    .find(`.${params.pagination.currentClass}`)
    .text(`${activeIndex + 1} - ${activeIndex + params.slidesPerView}`);

  slider.$el
    .find(`.${params.pagination.totalClass}`)
    .text(slider.slides.length);
}

on: {
  init() {
    setTimeout(updateFraction, 0, this);
  },
  slideChange() {
    updateFraction(this);
  },
  resize() {
    updateFraction(this);
  },
},

https://jsfiddle.net/1xLrtyqw/

Потому что

data('.nights')

data('.guests')

Не кажется ли вам, что как-то многовато точек?

Не надо закидывать картинки в стейт, пусть компонент получает их через props.

Добавите в стейт свойство, содержащее индекс отображаемой картинки, делайте ему +/- 1, в зависимости от нажатой кнопки, выход за границы массива поправляйте через взятие остатка от деления на его длину:

state = {
  active: 0,
}

nextSlideHandler = ({ target: { dataset: { step } } }) => {
  const len = this.props.images.length;

  this.setState(({ active }) => ({
    active: (active + len + +step) % len,
  }));
}

<button data-step="-1" onClick={this.nextSlideHandler} className="prev">prev</button>
<button data-step="+1" onClick={this.nextSlideHandler} className="next">next</button>
<img src={this.props.images[this.state.active]} />

https://jsfiddle.net/e7vzm9kq/

const [ active, setActive ] = useState(null);
const item = test.title[active];

const onClick = e => setActive(e.target.dataset.id);

Кнопки:

{Object.keys(test.title).map(n =>
  <button key={n} data-id={n} onClick={onClick}>{n}</button>
)}

Выбранный элемент:

{item && <div>{item.title} ---- {item.category}</div>}

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

$('div > span').click(e => e.stopPropagation());

Или в обработчике клика родительского элемента проверяйте, откуда пришло событие, если от дочернего элемента - ничего делать не надо:

$('div').click(function(e) {
  if ($(e.target).is('span')) {
    return;
  }

  ...
});

$res['href'] = array_values($res['href']);

В обработчике события scroll, после добавления/удаления класса добавьте $('.active-section').text(i + 1);.

Вместо явного объявления переменной можно деструктурировать объект события:

onClick = ({ target: { dataset: { shift } } }) => {
  this.setState(() => ({ shift }), this.filter);
}

Ну и бегом читать документацию, осознавать свою ошибку.

• Вызов Axios.get - лишние кавычки (внутренние)
  
• Пытаетесь запрашивать несуществующие данные - на первой итерации цикла id равен нулю, объекта с таким id указанный вами api не возвращает
  
• Вызов мутации - вместо response следует передавать response.data
  
• В самой мутации - изменяете одно свойство, а в стейте у вас какое-то другое
  
• Опять же, в мутации - выполняется присваивание, хотя, судя по коду в экшене (цикл), результаты должны складываться в массив (то есть, необходимо изменить или экшен, или мутацию - в первом случае следует собирать массив полностью, и только потом делать один общий коммит, во втором случае вместо присваивания должен выполняться push)
  

UPD. Исправляем:

mutations: {
  setTodos: (state, todos) => state.todos = todos,
},
actions: {
  async getTodos({ commit }) {
    const results = [];

    for (let i = 1; i <= 10; i++) {
      try {
        const { data } = await axios.get(`https://jsonplaceholder.typicode.com/todos/${i}`);
        results.push(data);
      } catch (e) {
        console.log(e);
      }
    }

    commit('setTodos', results);
  },
},

<ul>
  <li v-for="n in $store.state.todos" :key="n.id">
    <div>#{{ n.id }}</div>
    <div>{{ n.title }}</div>
  </li>
</ul>

foreach ($arr as $itemName => $item) {
  foreach ($item as $propName => $prop) {
    foreach ($prop as $val) {
      echo "$itemName : $val ; ($propName)<br>";
    }
  }
}

^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()+`'";:<>\/\|]).{6,}$

Изменений нет - объект остаётся тем же самым. Копируйте его.

const min = 0;
const max = 100;
const time = 5000;

(function step(val) {
  setTimeout(function() {
    document.querySelector('.block').innerText = val;
    if (val < max) {
      step(val + 1);
    }
  }, time / (max - min));
})(min);

$("#idModalEditUser").modal('show').find('.modal-body').text($(this).text());

array_merge(...array_map(function($n) {
  return [ $n, $n ];
}, $arr))

Очевидно, потому что переменная a никак не может принять значение, равное единице. Начните с 7, например. Сколько раз надо 7 разделить на 2, чтобы получить 1? Вот-вот.