0xD34F

Помогите пожалуйста написать учебный пример чтобы было видно действие и выгода инкапсуляции стилей. Мой вариант тут.

"Помогите"? Да вы и сами справились. Только зачем-то сами же всё и поломали.

непонятно какое действие осуществляет метааргумент encapsulation: ViewEncapsulation.None

Это отключение инкапсуляции стилей компонента.

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

Кажется, вы забыли о том, что у вас в стилях дочернего компонента background закомментирован - потому и применяется стиль из родительского компонента. Уберите комментирование - и оба элемента будут стилизованы в соответствие с правилом из дочернего компонента.

А ещё лучше - прекратите вдобавок отключать инкапсуляцию, и тогда элементы из разных компонентов будут стилизованы каждый по-своему, несмотря на то, что имя класса - одно и то же. Собственно, в этом и состоит, как вы там выразились? - "выгода инкапсуляции" - вы можете в каждом из компонентов определять собственные правила стилей, не беспокоясь о том, что они будут пересекаться со стилями других компонентов.

У вас в grid-template-areas область nav буквой "г" загнута. Опечатка? - наверное, имелось в виду что-то вроде этого.

А почему бы не использовать в шаблоне значение из props, вместо того, чтобы мучиться с отслеживанием изменений и т.д.?

Ну а так-то можно конечно использовать watch, чтобы следить за изменением props'ов, и переприсваивать что там вам нужно.

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

computed: {
  categories() {
    return this.$store.state.main_page.NEWS.map(n => ({
      value: n.id,
      label: n.name,
    }));
  },
},

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

deleteRow={() => this.deleteRow(i)}

deleteRow(index) {
  const productsList = [...this.state.productsList];
  productsList.splice(index, 1);
  this.setState({
    productsList,
  });
}

const grouped = data
  .reduce((acc, n, i, a) => {
    if (i && n.id === a[i - 1].id + 1) {
      acc[acc.length - 1][1][1] = n.id;
    } else {
      acc.push([ [], [ n.id ] ]);
    }
    acc[acc.length - 1][0].push(n);
    return acc;
  }, [])
  .reduce((acc, n) => {
    acc[n[1].join('-')] = n[0];
    return acc;
  }, {});

Сохранять открытые пункты меню в стек. Верхний элемент стека - текущий список пунктов меню (оформляем в виде вычисляемого свойства). Надо перейти к вложенному - кладём его в стек. Надо закрыть текущий и вернуться к родительскому - удаляем элемент из стека.

https://jsfiddle.net/dLyo3mkw/

У computed свойств можно делать (а вам в данной ситуации и нужно) и сеттеры:

dateStart: {
  get() {
    return moment().subtract(1, this.selectedPeriod).toDate();
  },
  set(value) {
    // ну, тут вам виднее, какой должен код быть
  },
},

Во-первых, параметр state функции, переданной в setState, перекрывает параметр state, передаваемый в modalRun. Во-вторых, второй параметр функции, передаваемой в setState - это props, а вовсе не state. В общем, дурацким выбором имён параметров сами себя в заблуждение вводите. Делайте так:

modalRun = (modalState) => {
  this.setState((prevState) => {
    return {
      modal: {
        ...prevState.modal,
        state: modalState,
      },
    };
  });  
}

$('input').on('input', function() {
  const
    $this = $(this),
    newVal = +$this.val(),
    oldVal = +$this.data('oldVal') || 0;

  if (oldVal !== newVal) {
    console.log(`новое ${['больше', 'меньше'][+(oldVal > newVal)]}`);
  }

  $this.data('oldVal', newVal);
});

Как я понимаю, при клике я каждый раз вызываю функцию и переменная val опять принимает значение равное нулю?

Не совсем так. При каждом клике создаётся ещё один экземпляр val, подключаются ещё по одному обработчику клика к .value-btn-plus и .value-btn-minus, сами обработчики срабатывают в порядке подключения, поэтому в value-text последним будет записано значение val, к которому имеет доступ последний же подключенный обработчик - т.е. 0, или что там у вас.

Очевидно, стоит отказаться от подключения дополнительных обработчиков. Можно вообще ограничиться одним обработчиком клика для всех кнопок, а какая именно была нажата - узнавать, проверяя наличие соответствующих классов. Как-то так:

$(document).on('click', '.value-btn-plus, .value-btn-minus', function() {
  const $this = $(this);
  const change = $this.hasClass('value-btn-plus') ? 1 : -1;

  $this
    .closest('.input-box')
    .find('.value-text')
    .text((i, text) => Math.max(0, +text + change));
});

Или, к чёрту jquery:

document.addEventListener('click', ({ target: t }) => {
  const change = +t.matches('.value-btn-plus') || -t.matches('.value-btn-minus');
  if (change) {
    const valueEl = t.closest('.input-box').querySelector('.value-text');
    valueEl.innerText = Math.max(0, +valueEl.innerText + change);
  }
});

Во первых - не нужны слэши в начале и конце, во-вторых - надо экранировать обратный слэш:

new RegExp('^\\d+$')

Ну или не надо использовать конструктор:

const numberValidator = str => /^\d+$/.test(str);

// можно и наоборот - вместо проверки, что все символы являются цифрами,
// убедиться, что отсутствует хотя бы один не являющийся цифрой
const numberValidator = str => !/\D/.test(str);

Про let слышал, но нужно сделать без него

Не нужно, но варианты есть такие:

for (var i = 0; i < 10; i++) {
  (function(i) {
    setTimeout(function() { 
      console.log(i);
    }, 1000);
  })(i);
}

for (var i = 0; i < 10; i++) {
  setTimeout(function() { 
    console.log(+this);
  }.bind(i), 1000);
}

for (var i = 0; i < 10; i++) {
  setTimeout(console.log, 1000, i);
}

for (var i = 0; i < 10; i++) {
  setTimeout(new Function(`console.log(${i})`), 1000);
}

for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(10 - i--);
  }, 1000);
}

^(([1-9]\d?)|(100)),(([1-9]\d?)|(100))$

<div class="container">
  <div class="yellow"></div>
  <textarea></textarea>
</div>

.container {
  display: inline-flex;
  width: 200px;
  height: 400px;
  flex-direction: column;
  border: 10px solid red;
}

.yellow {
  background: yellow;
  flex-grow: 1;
}

textarea {
  background: #47f;
  line-height: 20px;
  resize: none;
}

const textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
  const maxHeight = 300;
  const height = 20 * this.value.split('\n').length;
  this.style.height = `${Math.min(height, maxHeight)}px`;
});

textarea.dispatchEvent(new Event('input'));

из-за того, что при первичном рендере input №2 не существует, на него не применяется библиотека VeeValidate

Не совсем так, "input №2" - он вообще не существует, никогда. При смене значения show используется уже созданный элемент - потому что virtual dom, ага. Из-за этого veevalidate и косячит.

Задайте инпутам key - тогда они будут пересоздаваться при изменении show, и veevalidate заработает как надо.

при нажатии значение меняется у объекта для фильтрации... но не обновляет таблицу

Как сказано в документации по поводу pure пайпов:

Angular ignores changes within (composite) objects.

Наверное, пайп FilterdataPipe стоит сделать impure.

Кроме того, сама фильтрация - даже не знаю, что и сказать, настолько бредово устроена.

Ну и ещё у вас имя одного из свойств - department, а соответствующий фильтр называется departament (откуда-то вылезла a после первой t). И с city тоже непонятно - свойство вложенное, не знаете, что делать, поэтому даже и не начали реализовывать соответствующий фильтр?

Насколько я понял, вам нужно что-то вроде этого, да?

$('.pups').each(function() {
  this.innerHTML -= -2;
});

// или

$('.pups').text((i, text) => Number(text) + 2);

// или

document.querySelectorAll('.pups').forEach(n => {
  n.innerText = -~-~n.innerText;
});

// или

for (const n of document.getElementsByClassName('pups')) {
  n.textContent = parseInt(n.textContent) + 2;
}

могу ли я теперь использовать его на странице как...

А вы попробуйте.

как сделать так, чтобы внутри элемента можно было писать какие-то теги и все это запихнуло в контент?

Используйте слоты.

Наверное, стоит использовать animateChild:

import { query, animateChild } from '@angular/animations';

animations: [
  trigger('parentAnimation', [
    transition(':leave', [
      query('@itemAnim', [
        animateChild()
      ])
    ])
  ]),
  trigger('itemAnim', [
    transition(':enter', [
      animate(500)
    ]),
    transition(':leave', [
      group([
        animate('0.5s ease', style({ transform: 'translateY(-20%)', 'height':'0px' })),
        animate('0.5s 0.2s ease', style({ opacity: 0 }))
      ])
    ])
  ])
]