0xD34F

Градиентом можно сделать.

При нажатии на svg, event.target присваивается конкретным элементам - картинка внутри svg, текст, фигура итд.

event.target.closest('svg')

Допустим я нашел нужный эл-т, и вижу в console.log нужный атрибут, но если вызвать его напрямую, возвращается undefined

card.getAttribute('stroke')

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

onClickFuagra = () => {
  this.setState({
    strokeFuagra: '...',
  });
}

onClickFish = () => {
  this.setState({
    strokeFish: '...',
  });
}

<Samy svgXML={fuagra} onClick={this.onClickFuagra}>
  ...
</Samy>
<Samy svgXML={fish} onClick={this.onClickFish}>
  ...
</Samy>

Можно конечно и общий обработчик оставить:

onClick = e => {
  const svg = e.target.closest('svg');

  this.setState({
    [имя свойства зависит от svg, как определить по кому был клик - думайте сами]: '...',
  });
}

<div className="banners" onClick={this.onClick}>
  ...

Ну так и пишите - unix - вместо format:

moment().add(1, 'months').date(10).unix()

Нет у вас в компоненте recepies одноимённого массива, он находится в recipie-list. Очевидно, этот массив надо перенести в recepies (тогда его можно будет обойти с помощью ngfor для создания экземпляров recipies-detail), а в recipie-list передавать его как параметр.

onKeyDown = e => {
  if (e.key === 'Tab') {
    e.preventDefault();

    const
      input = e.target,
      str = input.value,
      currPos = input.selectionStart,
      wordEnd = str.slice(currPos).search(/[^\w]/);

    let pos = str.slice(currPos + wordEnd).search(/[^\s]/);
    if (pos) {
      pos += currPos + wordEnd;
    }
    if (pos === currPos) {
      pos = 0;
    }

    input.setSelectionRange(pos, pos);
  }
}

<input value={this.state.str} onKeyDown={this.onKeyDown} />

https://jsfiddle.net/acvjhxyt/

задайте ему отрицательный z-index

<balancelabel @updbalance="updatebalance"></balancelabel>

А зачем здесь обработчик события? Вы это событие обрабатываете внутри компонента, emit не делаете... Может его, ну не знаю, УБРАТЬ?!

Так?

Вам тут не нужен jquery, если уже используете angular. Добавляете в компонент свойство, которое будет содержать ссылку на выбранный объект и устанавливаете его значение по клику. Добавляете элементам класс, если выбранный объект совпадает с текущим:

<div
  *ngFor="let user of users"
  [class]="active === user ? 'active' : ''"
  (click)="active = user"
>

например

watch срабатывает тогда когда мне не надо

Ну так и включайте наблюдение только тогда, когда вам это нужно. Как это сделать, можете прочесть в документации.

вотчер возвращает оба одинаковых значения

Что естественно - от того, что вы изменили какое-то из свойств объекта, объект не заменит себя своей копией. Хотите, чтобы старое и новое значение были разными - заменяйте объект целиком.

Как извлечь случайный элемент массивоподобного объекта:

const random = arr => arr[Math.random() * arr.length | 0];

Извлекаем:

// одно значение
const randomName = random(arr_names);

// или сразу несколько
const randomNames = Array.from(
  { length: 5 },
  random.bind(null, arr_names)
);

// работать можно не только с массивами, но и, например, со строками
const randomChar = random('abcdefg');

// и HTMLCollection тоже будет как надо обработана
const randomImage = random(document.images);

Так?

$(elem).closest('.parent').addClass('active_list')

Потому что в jquery ничего такого нет, это свойство элемента. Которое получить можно так:

$('#text-column').prop('scrollHeight')
// или
$('#text-column').get(0).scrollHeight
// или
$('#text-column')[0].scrollHeight

$('.va-city-list').on('click', '.list-city', function() {
  console.log($(this).data('city'));
});

или

$('.list-city').click(e => console.log($(e.target).attr('data-city')));

или

document.querySelector('.va-city-list').addEventListener('click', e => {
  const { city } = e.target.dataset;
  if (city) {
    console.log(city);
  }
});

или

const onClick = e => console.log(e.target.getAttribute('data-city'));
document.querySelectorAll('.list-city').forEach(n => n.addEventListener('click', onClick));

или

for (const n of document.getElementsByClassName('list-city')) {
  n.onclick = onClick;
}

function onClick() {
  console.log(this.attributes['data-city'].value);
}

А зачем двигаться "пошагово"? Известны же координаты кнопок - можно вычитать одни из других, и сразу получать количество шагов:

const keyboard = [
  'abcde123',
  'fghij456',
  'klmno789',
  'pqrst.@0',
  'uvwxyz_/',
].reduce((acc, [...row], iRow) => {
  row.forEach((key, iCol) => acc[key] = [ iRow, iCol ]);
  return acc;
}, {});

function tvRemote(word) {
  let steps = word.length;
  let prev = [ 0, 0 ];

  for (const n of word) {
    const curr = keyboard[n];
    steps += Math.abs(prev[0] - curr[0]) + Math.abs(prev[1] - curr[1]);
    prev = curr;
  }

  return steps;
}

Валидация входных параметров

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

Решение через фунцию-валидатор я видел, но мне оно не кажется оптимальным для объектов. По крайней мере в React это намного короче и наляднее.

Возможно во Vue есть аналог?

Из коробки нет (следует отметить, что в React тоже - начиная с версии 15.5 React.PropTypes является устаревшим, и вместо него следует использовать prop-types). Можете сделать класс и передавать в props конструктор для проверки, что переданный параметр является экземпляром класса. Или используйте сторонние библиотеки, например - там аналог PropTypes.shape есть.

"react": "^16.4.0",

import React, { Component, PropTypes } from 'react';

Понятно. Открываем документацию, и видим, что

Note:
React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.

Array.from({ length: 5 }, () => <Text>hello, world!!</Text>)

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

const modal = document.querySelector('.modal');
const close = modal.querySelector('.close');

document.addEventListener('click', function(e) {
  if (e.target === modal || e.target === close) {
    modal.style.display = 'none';
  }

  if (e.target.tagName === 'BUTTON') {
    modal.style.display = 'block';
  }
});