0xD34F

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

Замените user_recording.added::timestamp на extract('epoch' from user_recording.added) * 1000.

Или замените ${obj.added} на to_timestamp(${obj.added / 1000}).

<div class="tab-headers">
  <button data-id="1">69</button>
  <button data-id="2">187</button>
  <button data-id="3">666</button>
</div>

<div class="tab-contents">
  <div data-id="1">hello, world!!</div>
  <div data-id="2">fuck the world</div>
  <div data-id="3">fuck everything</div>
</div>

.tab-contents div {
  display: none;
}

.tab-contents div.active {
  display: block;
}

.tab-headers button.active {
  background: red;
  color: white;
}

const headerSelector = '.tab-headers button';
const contentSelector = '.tab-contents div';
const activeClass = 'active';


// делегирование, назначаем обработчик клика один раз для всех кнопок;
// соответствие кнопок и блоков устанавливаем через равенство атрибутов
document.addEventListener('click', e => {
  const header = e.target.closest(headerSelector);
  if (header) {
    const { id } = header.dataset;
    const toggle = n => n.classList.toggle(activeClass, id === n.dataset.id);
    document.querySelectorAll(headerSelector).forEach(toggle);
    document.querySelectorAll(contentSelector).forEach(toggle);
  }
});

// или, назначаем обработчик клика каждой кнопке индивидуально;
// соответствие кнопок и блоков устанавливаем через равенство индексов
const headers = document.querySelectorAll(headerSelector);
const contents = document.querySelectorAll(contentSelector);

headers.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const index = Array.prototype.indexOf.call(headers, this);
  const toggle = (n, i) => n.classList.toggle(activeClass, i === index);
  headers.forEach(toggle);
  contents.forEach(toggle);
}

'1 2 3 4 5 6 7 8 9 0'.replace(/([^ ]+ [^ ]+) /g, '$1;') // "1 2;3 4;5 6;7 8;9 0"

Одного vue будет недостаточно - помимо отображения данных на клиенте, надо ещё следить за изменением файлов на сервере. Можно попробовать посмотреть в сторону node.js + websocket.

Набросок решения, сервер (используется ws):

const fs = require('fs');

let ID = 0;
const clients = {};

new (require('ws').Server)({
  port: 8081,
}).on('connection', ws => {
  const id = ++ID;
  clients[id] = ws;

  ws.on('close', () => {
    delete clients[id];
  });
});

fs.watch('./', (eventType, filename) => {
  if (/\.json$/.test(filename)) {
    fs.readFile(filename, 'utf8', (err, data) => {
      if (!err && data) {
        const info = JSON.stringify({
          filename,
          data: JSON.parse(data),
        });

        Object.values(clients).forEach(n => n.send(info));
      }
    });
  }
});

Клиент:

<div id="app">
  <div v-for="(data, name) in files">
    <div>{{ name }}</div>
    <div>{{ data }}</div>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    socket: null,
    files: {},
  },
  created() {
    this.socket = new WebSocket('ws://localhost:8081');
    this.socket.onmessage = e => {
      const f = JSON.parse(e.data);
      this.$set(this.files, f.filename, f.data);
    };
  },
});

Math.sqrt - если аргумент отрицательный, возвращает NaN.

Как исправить? - не пытаться вычислять корни квадратного уравнения при отрицательном дискриминанте. Кажется, этому учат классе так в 8. Или даже в 7. Ещё не прошли или уже успели забыть?

SELECT
  m.id,
  m.text,
  CASE m.typeauthor
    WHEN '1' THEN
      (SELECT name FROM idmc WHERE id = m.authorid)
    WHEN '2' THEN
      (SELECT name FROM suppliers WHERE id = m.authorid)
  END
FROM messages m

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

Но не нужно. Лучше воспользуемся vuex.

В компоненте, из которого надо "получить доступ", вызываем мутацию, изменяющую значение выбранного фильтра, а в компоненте с isotope'ом устанавливаем наблюдение за этим значением, где и дёргаем $refs.cpt.filter. Типа так.

Или, к чёрту $refs - можно оформить в хранилище геттер, представляющий отфильтрованные данные, и создавать элементы для isotope'а на их основе. Как это может выглядеть.

<button data-step="-1">Prev</button>
<button data-step="+1">Next</button>

$(document).on('click', '[data-step]', function({ target: { dataset: { step } } }) {
  const $wrapper = $(this).closest('.wrapper');
  const $blocks = $wrapper.find('.wrapper-small-block .small-block');
  const $active = $blocks.filter('.active');
  const $nextActive = $blocks.eq(($active.index() + +step) % $blocks.length);

  $active.removeClass('active');
  $nextActive.addClass('active');
  $wrapper.find('.preview').html($nextActive.html());
});

// или

document.addEventListener('click', ({ target: t }) => {
  const { step } = t.dataset;
  if (step) {
    const wrapper = t.closest('.wrapper');
    const blocks = wrapper.querySelector('.wrapper-small-block').children;
    const iActive = Array.prototype.findIndex.call(blocks, n => n.matches('.active'));
    const nextActive = blocks[(iActive + +step + blocks.length) % blocks.length];

    blocks[iActive].classList.remove('active');
    nextActive.classList.add('active');
    wrapper.querySelector('.preview').innerHTML = nextActive.innerHTML;
  }
});

А с чего вы взяли, что emit не работает, чем докажете свои слова?

Я так думаю - всё работает, просто вы забыли о всплытии событий. Вы кликаете на .news-popup__content__close, генерируется событие click, оно обрабатывается - выполняется emit, генерируется событие close, оно обрабатывается в соответствующем обработчике, popup убирается. При этом событие click никуда не делось, оно всплывает, и в .news-block обрабатывается ещё раз - только что удалённый popup снова рендерится. Ну а внешне это всё выглядит так, будто ничего и не произошло.

Что делать? Понятно что - останавливать всплытие, т.е.,

<div class="news-popup__content__close" @click="$emit('close')"></div>

замените на

<div class="news-popup__content__close" @click.stop="$emit('close')"></div>

P.S. А почему на каждый элемент .news-block у вас отдельный popup, что за дичь-то такая?

Вы же просто метод вызываете - откуда там взяться объекту события? Надо повесить на элемент соответствующий обработчик. Типа так.

Но ведь this.$refs.cpt это объект а не массив.

Откуда такая информация? Как именно определён cpt вы почему-то решили не показывать, а если ref используется совместно с v-for (на том же элементе, или дочерних) - будет массив.

Собрать новый объект:

const newData = Object
  .entries(data)
  .reduce((acc, [ k, v ]) => (v.length && (acc[k] = v), acc), {});

Удалить свойства существующего:

Object.keys(data).forEach(n => data[n].length || delete data[n]);

Можно использовать Lodash.

const newData = _.pickBy(data, n => n.length);

// или

_.each(data, (v, k) => v.length || delete data[k]);

Смените привязку параметра со статической на динамическую:

<my-component :docs='{{ json }}' />

Всё, не надо никакого JSON.parse, docs сразу будет объектом.

[55.7977,37.7283] - например эту строку в объект

Наверное, всё-таки в массив - координаты в ymaps указываются в виде массива чисел.

Поскольку строка представляет собой корректный json, ответ очевиден: JSON.parse(str).

Но есть и другие варианты, разной степени дикости:

str.match(/\d+(\.\d+)?/g).map(n => +n)

// или

str.slice(1, -1).split(',').map(Number)

// или

eval(str)

// или

new Function(`return ${str}`)()

/[02-9]{5}\d{10}/

пытаюсь остановить выполнение функции

Что-то я такого у вас вообще не вижу. Для отмены действия setInterval надо вызвать метод clearInterval, ну и конечно предварительно сохранить id таймера:

data: () => ({
  intervalID: null,
}),
methods: {
  mouseEnter() {
    this.intervalID = setInterval(() => {
      console.log('тик');
    }, 500);
  },
  mouseLeave() {
    clearInterval(this.intervalID);
    this.intervalID = null;
  },
},

Можно сделать обычный текст с подложенной под него картинкой, типа так:

background: url(...);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Говорите, делали всё как в документации? - а вот и нет. В документации прямым текстом сказано, что

you have to pass formReducer under 'form' key

"You have to" - "вы должны". А у вас что? Вместо form - formReducer. Исправляем, всё работает.

str.replace(/(Math\.)?(a?tan)/g, 'Math.$2')

<div v-for="(item, i) in items" :style="!i && { padding: '10px' }">