0xD34F

Неудивительно, что "всплывают все блоки". Ведь блоков у вас три, а свойство, отвечающее за активность блока - одно, общее для всех. Никакие атрибуты тут не помогут. Вместо логического значения активности работайте с номером активного блока:

<ul>
  <li
    v-for="(n, i) in items"
    :data-rel="`ex-${i + 1}`"
    @click="active = i"
  >item #{{ i + 1 }}</li>
</ul>

<div
  v-if="active !== null"
  @mouseleave="active = null"
>{{ items[active] }}</div>

data() {
  return {
    active: null,
    items: [
      'hello, world!!',
      'fuck the world',
      'fuck everything'
    ]
  }
}

https://jsfiddle.net/fh9nvt5b/

SELECT *
FROM tablename
WHERE date(date_create_stamp) = date(ну а здесь типа ваш timestamp)

Добавить обработчик onChange:

onChange(data) {
  $('input[name="sum"]').val(data.from);
}

И как поступить, если слайдера например два.

onChange(data) {
  data.input
    .closest('селектор блоков со слайдерами')
    .find('селектор инпутов, в которые надо копировать значения')
    .val(data.from);
}

https://jsfiddle.net/k7stn10b/

Контекст потеряли. Делайте так:

setTimeout(() => location.href = this.href, 400);

Или так:

setTimeout(function() {
  location.href = this.href;
}.bind(this), 400);

Или так:

setTimeout(function(href) {
  location.href = href;
}, 400, this.href);

Плагинов есть много разных.

Называется - image comparison.

Положите рядом (в смысле - сделайте свойствами одного объекта) шаблон и данные, которые в него будут засовываться. Т.е., вместо нескольких массивов должен быть один, типа так:

data: () => ({
  blocks: [
    {
      template: '<div><ul><li v-for="n in data" v-html="n"></li></ul></div>',
      data: [
        '<h2>Заголовок 1</h2><p>какой-то текст 1</p>',
        '<h2>Заголовок 2</h2><p>какой-то текст 2</p>',
      ],
    },
    {
      template: '<div><h3 v-for="color in data" :style="{ color }">{{ color }}</h3></div>',
      data: [ 'red', 'green', 'blue' ],
    },
    {
      template: '<div><p v-for="i in data">{{ i }}</p></div>',
      data: 4,
    },
  ],
}),

Сделайте компонент, параметрами которого будут шаблон и данные. Шаблон компилируется, результат компиляции применяется в render-функции:

Vue.component('block-component', {
  props: [ 'template', 'data' ],
  computed: {
    compiled() {
      return Vue.compile(this.template);
    },
  },
  render() {
    return this.compiled.render.call(this);
  },
});

Создавайте экземпляры этого компонента:

<block-component v-for="n in blocks" v-bind="n"></block-component>

https://jsfiddle.net/qnwa4kgv/

Убрать margin-left и margin-top.
Добавить display: inline-block;.
Ширину и высоту указать относительные - 30% и 50%, например.

Похоже на то, что вам нужно?

Потому что обработчик клика не вызывается. А не вызывается он потому, что прицепить вы его попытались к несуществующему элементу - изначально у .wrap нет класса done, так что результат вызова $('.wrap.done') окажется пустым.

Можно вешать делегированный обработчик:

$(document).on('click', '.wrap.done', function() {
  $('.form, .wrap').removeClass('done');
});

Или, немного подумав, можно сообразить, что в отсутствие класса done элемент .wrap не виден, кликать некуда, так что неважно, есть класс или нет - можно цеплять обработчик клика просто к .wrap.

Это всё отлично разруливается через css:

.one:hover + .two,
.two:hover {
  /* показываем элемент .two */

UPD. Вынесено из комментариев:

Вообще класс нужно добавлять.

Да без проблем - подключайте к .two тот же обработчик ховера, что и к .one:

$('.one, .two').hover(function() {
  $('.two').toggleClass('show');
});

Сделаем совсем просто - если новое значение совпало с предыдущим, будем добавлять единицу:

function pasGen(chars, length) {
  let prev = null;
  return Array
    .from({ length }, () => {
      const i = Math.random() * chars.length | 0;
      return chars[prev = (i + (i === prev)) % chars.length];
    })
    .join('');
}

<div class="heading">
  <p>hello, world!!</p>
  <p>fuck the world</p>
  <p>fuck everything</p>
</div>

.heading {
  display: inline-block;
  position: relative;
  width: 900px;
  height: 70px;
  background: red;
  overflow: hidden;
  font-size: 60px;
}
.heading > p {
  text-transform: uppercase;
  color: #fefefe;
  position: absolute;
  width: 900px;
  top: 0;
  left: 0;
  animation: text 6s infinite;
  margin: 0;
  padding: 0;
}
.heading > p:nth-child(1) { animation-delay:  0s; }
.heading > p:nth-child(2) { animation-delay: -4s; }
.heading > p:nth-child(3) { animation-delay: -2s; }

@keyframes text {
  0% {
    opacity: 1;
  }
  25%, 100% {
    margin-left: 50px;
    opacity: 0;
  }
}

Вот в этом фрагменте символы подчёркивания - долой:

switch (index)
{
    case 0: return _Name;
    case 1: return _TypeVlasn;
    case 2: return _HeadSurname;
    default:
        return "";
}

Ну и сеттеры у вас все кривые тоже.

const imageId = post.fields.image.sys.id

Что-то ни у одного поста нет image.

Ну а так-то можете использовать индекс, заменяете .forEach((post) на .forEach((post, i), а

this.images.push(response.data.fields.file.url);

заменяете на

this.$set(this.images, i, response.data.fields.file.url);

Или, есть вариант отказаться от использования дополнительного массива, и сохранять путь к картинке прямо в объект поста. Вместо :src="images[index]" будет :src="post.image", а

this.images.push(response.data.fields.file.url);

поменяется на

this.$set(post, 'image', response.data.fields.file.url);

Кому и что надо добавить:

const el = document.querySelector('.fab-button');
const key = 'ripple';
const val = 'true';

Добавляем:

el.dataset[key] = val;

// или

el.setAttribute(`data-${key}`, val);

// или

const attr = document.createAttribute('data-' + key);
attr.value = val;
el.attributes.setNamedItem(attr);

А почему вы решили, что "обновить вид" означает повторную инициализацию таблицы? Бред же. Удаляйте старые данные (метод clear), добавляйте новые (метод add).

Цикл не нужен:

$('.mysubmit').prop('disabled', arr.indexOf(str) !== -1);

UPD. А-а-а, чёрт возьми - у вас поиск слов по тексту, а не проверка соответствия текста одному из слов... Тогда так:

$('.mysubmit').prop('disabled', arr.some(n => str.indexOf(n) !== -1));

$grouped = [];
foreach ($products as $p) {
  $grouped[$p['category-id']][] = $p['name'];
}

А почему цикл? Вставляйте одним запросом.

<input placeholder="цена, руб.">

$('input').on({
  focus() {
    $(this).val((i, v) => v.replace(', руб.', ''));
  },
  blur() {
    $(this).val((i, v) => v && `${v}, руб.`);
  },
});

Но может лучше будет этот , руб выводить не в input, а в отдельный элемент рядом?

Кто должен отсутствовать и какой класс надо удалить:

const childSelector = 'img';
const className = 'myclass';

Удаляем:

$(`.${className}:not(:has(> ${childSelector}))`).removeClass(className);

или

document.querySelectorAll(`.${className}`).forEach(n => {
  n.classList.toggle(className, !!n.querySelector(`:scope > ${childSelector}`));
});

или

const elems = document.getElementsByClassName(className);
for (let i = elems.length; i--;) {
  if (!Array.prototype.some.call(elems[i].children, n => n.matches(childSelector))) {
    elems[i].classList.remove(className);
  }
}