0xD34F

Метод openClick - кто вас такой мерзости научил? Срочно читаем документацию, как правильно работать с классами. Но вообще, чтобы скрывать/показывать элементы, переключать классы необходимости нет - под это дело предусмотрен специальный инструмент.

data: () => ({
  show: false,
  items: [ 'в сети', 'занят', 'отсутствую', 'в самолете', 'в пути' ],
  status: 'статус',
}),
methods: {
  selectStatus(status) {
    this.status = status;
    this.show = false;
  },
},

<div
  v-text="status"
  @click="show = !show"
></div>
<ul v-show="show">
  <li
    v-for="n in items"
    v-text="n"
    @click="selectStatus(n)"
  ></li>
</ul>

Передавайте в мутацию вместо просто состояния диалога объект вида { имя_диалога: состояние }. Тогда при обновлении состояния диалогов не будет необходимости обращаться к ним поимённо:

mutations: {
  dialogShow: (state, payload) => Object.assign(state.modals, payload),
},

В компоненте, вместо вычисляемого свойства modal, отвечающего за работу с одним диалогом, будет свойство modals, обеспечивающее получение состояния всех диалогов. А чтобы изменение состояния диалога по-прежнему выглядело как присваивание, воспользуемся Proxy, где будем перехватывать установку значений и вызывать мутацию:

modals() {
  return new Proxy(this.$store.state.modals, {
    set: (target, prop, value) => {
      this.$store.commit('dialogShow', { [prop]: value });
      return true;
    },
  });
},

Соответственно, в шаблоне заменяем установку значения просто свойства на установку значения свойства объекта:

<el-button @click="modals.dialogSignIn = true">sign in</el-button>

<el-dialog :visible="modals.dialogSignIn" @close="modals.dialogSignIn = false">
  <span slot="footer" class="dialog-footer">
    <el-button @click="modals.dialogSignIn = false">Закрыть</el-button>
  </span>
</el-dialog>

Посмотреть живьём.

По умолчанию задан padding-left для ul. 40 пикселей.

То есть если пользователь кликнул три раза по первой кнопке, то дочерний компонент значение "4" вывел только один раз.

А если кликнул по первой, потом по второй, а потом снова по первой? Что должно быть выведено в консоль? Если 4-2-4, тогда используйте ngOnChanges для вывода значений. Если 4-2-ничего - добавьте в дочерний компонент массив, куда будете складывать выводимые значения, и перед выводом проверяйте, есть ли там то, что собираетесь отправить в консоль.

В Network указывается не jpeg, а text/html

Путь неправильный. Или сервер файл не отдаёт. Вы бы посмотрели, что там в этом text/html - должно быть написано.

Ну и зачем тут requestAnimationFrame - я без понятия. Выглядит бредово. Есть же обработчик onload - в нём и рисуйте:

mounted() {
  const img = new Image();
  img.onload = () => this.$refs.canvas.getContext('2d').drawImage(img, 0, 0);
  img.src = '...';
},

https://jsfiddle.net/bd0ro2yL/

Работа с формами, это извините, основы. Читайте документацию.

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

const input = document.querySelector('#textLink');
const buttonSelector = '.link';

Как достать текст, имея на руках элемент:

const getText = el => el.innerText;
// или
const getText = el => el.textContent;
// или (будет работать как надо, пока элемент остаётся ссылкой)
const getText = el => el.text;
// или (будет работать как надо, пока вложенные элементы не появятся)
const getText = el => el.innerHTML;

Делегирование, назначаем обработчик клика один раз:

document.addEventListener('click', ({ target: t }) =>
  (t = t.closest(buttonSelector)) &&
  (input.value = getText(t))
);

Или, назначаем обработчик клика каждому элементу индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => input.value = getText(e.currentTarget));

<select id="departure"></select>
<select id="destination"></select>
<select id="type">
  <option value="1">в одну сторону</option>
  <option value="2">туда и обратно</option>
</select>
<div id="price"></div>

const routes = [
  [ 'Хабаровск',      'Казань', 100 ],
  [ 'Хабаровск',        'Омск', 200 ],
  [ 'Хабаровск', 'Владивосток', 300 ],
  [ 'Хабаровск',     'Иркутск', 400 ],
  [ 'Хабаровск',      'Москва', 500 ],
  [    'Тюмень',    'Владимир', 234 ],
  [    'Тюмень',  'Красноярск', 345 ],
  [    'Тюмень',         'СПб', 456 ],
  [    'Тюмень',      'Москва', 567 ],
  [    'Тюмень',      'Якутск', 678 ],
];

const prices = routes.reduce((acc, n) => (
  (acc[n[0]] = acc[n[0]] || [])[n[1]] = n[2],
  (acc[n[1]] = acc[n[1]] || [])[n[0]] = n[2],
  acc
), {});

const setOptions = (el, options) =>
  el.innerHTML = options.map(n => `<option>${n}</option>`).join('');

const updatePrice = () =>
  price.textContent = type.value * prices[departure.value][destination.value];

const departure = document.querySelector('#departure');
const destination = document.querySelector('#destination');
const type = document.querySelector('#type');
const price = document.querySelector('#price');

type.addEventListener('change', updatePrice);
destination.addEventListener('change', updatePrice);
departure.addEventListener('change', e => {
  setOptions(destination, Object.keys(prices[e.target.value]));
  updatePrice();
});

setOptions(departure, Object.keys(prices));
departure.dispatchEvent(new Event('change'));

Указывать атрибут selected бессмысленно - v-model его игнорирует. Вместо этого, задайте свойству selectedSport в качестве начального значения пустую строку - как в value нужного вам option'а.

Не работает

Всё правильно, так и должно быть. Чего ещё вы ожидали, вешая disabled?

есть вариант решения?

Решения чего? Что вы вообще пытаетесь сделать? Ничего не понятно.

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

Я хочу что бы у инпутов focus срабатывал только по клику

Используйте readonly вместо disabled. Как-то так.

arr.map(n => ({
  ...n,
  items: n.items.filter(m => m.checked).map(m => ({ ...m })),
}))

возможно, computed надо высчитывать?

Если при изменении исходного массива должен обновиться массив c отмеченными элементами, то да, надо:

computed: {
  checkedArr() {
    return this.arr.map(/* ... */);
  },
},

$('select')
  .last()
  .clone()
  .attr('id', (i, id) => id.replace(/\d+$/, m => +m + 1))
  .appendTo('body');

const data = [
  { title: 'a', value:   0 },
  { title: 'b', value: 100 },
  { title: 'c', value: 200 },
];

d3.select('#svg')
  .selectAll('g')
  .data(data)
  .enter()
  .append('g')
  .append('rect')
  .attr('x', d => d.value)
  .attr('y', d => d.value)
  .attr('width', 50)
  .attr('height', 50)
  .attr('fill', '#F0A');

В интересующем вас компоненте определяете хук beforeRouteEnter - в нём и инициируете получение данных. Как оно конкретно выглядит - непосредственно выполнение запроса, или вызов экшена - тут вам виднее. После получения данных дёргаете next. Всё.

UPD. Не, не всё. Если не очень поняли, о чём я - сделал небольшой пример. Три роута, первые два ни о чём, последний - показывает данные из хранилища. И при каждом переходе инициирует их обновление.

Не вижу явного удаления из дом дерева.

Неявно тоже ничего не удаляется - элемент перенесён в .js-select-tabs-head, неужели этого не видно? Или вы думаете, что там другой элемент, копия? Это не так - можете получить элемент до вызова html, после, сравнить их, увидите, что это один и тот же элемент.

Хотите, чтобы происходило копирование вместо перемещения... Ну, очевидно же:

$head.html($text.filter('.is-active').clone()).

$str = preg_replace('/[^\n\w]+/', ' ', $str);

Раз у вас список - значит, наверное, за цвет каждого элемента должно отвечать отдельное значение, а не как у вас - одно на всех. Наверное, эти отдельные значения должны быть свойствами элементов массива, на основе которого разметка будет создаваться с помощью v-for, а не как у вас - вручную. Наверное, если элементы должны менять цвет независимо, соответствующий класс и обработчик клика должны назначаться самим элементам, а не как у вас - контейнеру.

UPD. jsfiddle.net/42bfx93e

При подключении обработчиков клика к кнопкам навигации, сами кнопки вы ищите внутри формы - а их там нет.

Замените

form.on("click", ".next", function(event) {

на

$(".next").on("click", function(event) {

Аналогично и с .back.

Ну или засуньте кнопки в форму.

Надо указать пространство имён, к которому относится добавляемый элемент.

Т.е., вместо append('div') должно быть append('xhtml:div').

Если захотите добавить внутрь div'а ещё что-то - указывать пространство имён уже не нужно, по умолчанию оно наследуется от родительского элемента.