0xD34F

Есть свойство selected в родительском компоненте - используйте его, передавайте в список, и назначайте класс в зависимости от равенства элемента списка текущему выбранному.

https://jsfiddle.net/cfLk1jdu/

<div id="app"></div>

function App() {
  const [ dark, setDark ] = React.useState(null);
  const updateDark = e => setDark(e.type === 'mouseover' ? e.currentTarget.id : null);

  return (
    <React.Fragment>
      {[ 'left', 'right' ].map(n => (
        <div
          id={n}
          key={n}
          onMouseOver={updateDark}
          onMouseLeave={updateDark}
          className={dark && dark !== n ? 'dark' : ''}
        ></div>
      ))}
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

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

Или, можно переключаться между изображениями без js. Опять же, добавляете изображениям классы, обозначающие категории. Делаете скрытые радиокнопки, id которых соответствуют категориям. После них располагаете связанные с ними лейблы (будут выступать в роли кнопок) и изображения. С помощью :checked, subsequent-sibling combinator и :not стилизуете лейблы и прячете изображения, у которых отсутствует класс выбранной категории. Вот как-то так.

Потому что в html далеко не всякий тэг может быть самозакрывающимся, и если не может, а вы его так оформили, то он рассматривается браузером как открывающий, и всё, что следует за ним, попадает внутрь элемента. То есть, у вас элемент app имеет дочерний элемент designer, у него тоже есть дочерний элемент - higlighter, у которого внутри context-menu. В таком виде ваш шаблон попадает к Vue.

Так что закрывайте тэги, или вместо dom-шаблона используйте что-нибудь другое - свойство template, render-функция, однофайловые компоненты.

Так же, как и везде:

stop(e) {
  e.stopPropagation();
}

onTransitionEnd={this.stop}

if (novyna.lenght) {

Что ещё за "lenght"? Я такого слова не знаю. Есть "length".

в процессе экспериментов было установлено, что если написать в условии вообще какую-либо фигню, типа if(novyna.lenght=55), то новости выводятся как ни в чем не бывало

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

class News extends React.Component {

У этого компонента нет причин быть классом:

const News = ({ news }) =>
  <div className="news">
    {Array.isArray(news) && news.length
      ? news.map(n => (
          <div key={n.id}>
            <p className="news__author">{n.author}:</p>
            <p className="news__text">{n.text}</p>
            <hr/>
          </div>
        ))
      : <p>Нет</p>}
    <strong>Всего новостей: {news.length}</strong>
  </div>;

isBarMenuClicked: false, // эту переменную нужно передать

Не нужно. Зачем кнопке знать о состоянии меню? - её дело нажиматься и оповещать об этом того, кто находится выше. Делайте по клику $emit('click'), подписывайтесь на событие в родительском компоненте, переключайте там значение переменной, отвечающей за открытость меню и передавайте её в меню как параметр.

Потому что выходите из функции, как только первое событие будет найдено.

Вы вообще как, понимаете, что делает return?

Уверен, можно написать всё короче раза в три, чем есть сейчас, но разбирать ваш код... Вряд ли кто-то тут на такое сподобится, просто заставим его работать ожидаемым образом. Добавляете метку перед внешним циклом, и объявляете массив, в который будете складывать события. Должно стать так:

const events = [];

collectEvents:
for(let z = 0; z < arrOfEvents.length; z++){

Все return memo заменяете на

events.push(memo);
continue collectEvents;

После внешнего цикла добавляете return events;.

.one path {
  fill: #909090;
}
.one.active path {
  fill: #f00;
}

const itemSelector = '.one';
const activeClass = 'active';

document.addEventListener('click', function(e) {
  const el = e.target.closest(itemSelector);
  if (el) {
    el.classList.toggle(activeClass);
  }
});

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.currentTarget.classList.toggle(activeClass));

https://jsfiddle.net/zw4k6vsu/

Хранилище:

state: {
  date: null,
  interval: null,
},
mutations: {
  update(state) {
    state.date = new Date();
  },
  start(state) {
    if (!state.interval) {
      state.interval = setInterval(this.commit, 1000, 'update');
    }
  },
  stop(state) {
    if (state.interval) {
      clearInterval(state.interval);
      state.interval = null;
    }
  },
},

Компонент:

computed: {
  timerActive() {
    return !!this.$store.state.interval;
  },
  timeStr() {
    const { date } = this.$store.state;
    return date instanceof Date
      ? [ 'getHours', 'getMinutes', 'getSeconds' ]
          .map(n => `${date[n]()}`.padStart(2, 0))
          .join(':')
      : 'ВРЕМЕНИ НЕТ';
  },
},
created() {
  this.$store.commit('start');
},

<button @click="$store.commit('start')" :disabled="timerActive">start</button>
<button @click="$store.commit('stop')" :disabled="!timerActive">stop</button>
<div>{{ timeStr }}</div>

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

https://jsfiddle.net/5kdqema2/

v-on="условие ? { событие: обработчик } : {}"

или (но так vue будет кидать предупреждение, что обработчик "invalid")

v-on="{ событие: условие ? обработчик : null }"

const result = arrs.reduce(
  (acc, arr) => (arr.forEach((n, i) => acc[i].push(...n.slice(acc[i].length))), acc),
  Array.from({ length: Math.max(...arrs.map(arr => arr.length)) }, () => [])
);

или

const result = arrs.reduce((acc, arr) => (
  arr.forEach((n, i) => (
    acc[i] = acc[i] || [],
    n.forEach((m, j) => acc[i][j] = acc[i][j] || m)
  )),
  acc
), []);

хочу, чтобы модальное окно отображалось столько раз, сколько событий в дне, и каждый раз с подробной информацией о новом событии

То есть, на день назначено десять событий, пользователь случайно ткнулся в этот день, и чтобы продолжить работу, ему надо будет десять окон прокликать? Круто. Предусмотрите хотя бы возможность закрыть сразу всё.

Вместо свойства detailInformationOfEvent сделайте detailInformationOfEvents (то же самое, но во множественном числе) - массив. Само свойство detailInformationOfEvent станет вычисляемым:

computed: {
  detailInformationOfEvent() {
    return this.detailInformationOfEvents[0];
  },
  ...

Когда в detailEvent собираете события для показа в окне - вместо присваивания будет добавление в массив:

this.detailInformationOfEvents.push({
  ...
});

Условие показа окна - вырезаете modalWindowDetail, вместо него будет detailInformationOfEvent (т.е., пока в массиве событий что-то есть - окно показывается):

v-show="detailInformationOfEvent"

Клик по кнопке "Окей" - вместо присваивания будет удаление нулевого элемента массива событий:

detailInformationOfEvents.shift()

https://jsfiddle.net/sjw506rc/

Ну как так-то, а? Можно же было самостоятельно открыть документацию, и прочитать:

Метод Performance.now() возращает временную метку DOMHighResTimeStamp, измеряемую в миллисекундах

Надеюсь, перевести миллисекунды в секунды труда не составит.

array_walk($pagesArray, function($v, $k, $p) use(&$s) {
  if (!isset($p[$v])) {
    $s[] = $v;
  }
}, array_flip($permisArray));

options: {
  hover: {
    animationDuration: 0,
  },
},

const createArr = (len, digit, count) => {
  const d = [...Array(9)].map((n, i) => i + (i >= digit));

  return [...Array(len)].map(() => {
    const number = [...Array(Math.random() * 10 | 0)].map(() => d[Math.random() * d.length | 0]);

    for (let i = 0; i < count; i++) {
      number.splice(Math.random() * number.length | 0, 0, digit);
    }

    return +number.join('');
  });
};


const arr = createArr(5, 1, 2);