litash

Может кому пригодится, получилось так:

<a href="map.html" class="button contacts-button-map">КАК ПРОЕХАТЬ</a> <!-- Кнопка 1 -->
<a href="map.html" class="contacts-button-map" >КАК НАС НАЙТИ?</a> <!-- Кнопка 2 -->

var linkmap = document.querySelectorAll(".contacts-button-map");
linkmap.forEach(function (entry) {
	entry.addEventListener("click", function (event){
		event.preventDefault();
		popupmap.classList.add("modal-show");
	});
});

https://nehakadam.github.io/AnyPicker/
https://www.cssscript.com/ios-style-picker-view-va...
https://github.com/chuyik/jquery-datepicker-ios-an...

https://codepen.io/yarkovaleksei/pen/LvVXvb

При клике в первом компоненте делайте $emit выбранного значения / индекс кликнутого элемента / или что там у вас в родительский компонент, а оттуда в качестве параметра передавайте его во второй. Например.

https://codepen.io/anon/pen/WYEEBE

Не нужен тут никакой each, обращаться к элементам непосредственно необходимости нет:

$('li, div, p', '#wrapper').attr('custom-attr', i => `test${i + 1}`);

Конечно, если не решите отказаться от jquery:

document
  .querySelector('#wrapper')
  .querySelectorAll('li, div, p')
  .forEach((n, i) =>  n.setAttribute('custom-attr', 'test' + -~i));

const toString = obj => Object.values(obj).join(' ');

items.forEach(n => console.log(toString(n)));

computed: {
  foundItems() {
    return []
      .concat(...this.items.map(n => n.props || []))
      .filter(n => n.name.includes(this.search));
  },
},

<li v-for="item in foundItems">
  {{ item.name }}
</li>

https://jsfiddle.net/8qyrtsac/

Передавайте "разные данные" в качестве параметров компонента.
В вашем случае это может выглядеть... допустим, так.

https://codepen.io/anon/pen/GGLNRp

динамическое переключение компонентов

https://jsfiddle.net/e68y0fwc/

pug работает статически, т.е. после его компиляции создается html файл, и этот html файл уже открывается в браузере. Если вы напишите так

if a > 10
div hello
else
div ne hello

то если в момент компиляции a была больше 10, то в html файл попадет строка
<div>Hello</div>
и больше никак, до следующей компиляции (и если там уже a будет меньше, то попадет ne hello).
Поэтому pug ничего не знает о объекте window и адресе текущей страницы. Вы можете адрес задавать в шапке страницы указывая свою переменную, например currentPage. И везде на разных страницах указывать ее разной

Дело в том, что когда selected возвращает ложь, элемент удаляется из древа DOM и, следовательно, перестаёт работать jquery плагин инициализированный на нём. Чтобы это избежать, необходимо научиться понимать жизненный цикл Vue компонента. К тому же следует выделять код работающий с DOM но не являющийся неотъемлемой частью компонента в директивы. Например (для однофайловых компонентов):

<template>
  <div v-fancy-plugin="{ argumentObjectKey: 'value' }"></div>
</template>
<script>
import $ from 'jquery'
import fancyPlugin from 'fancy-plugin'

export default {
  directives: {
    fancyPlugin: {
      inserted (element, argumentObject) {
        $(element).fancyPluginInit(argumentObject)
      }
    }
}
</script>

Таким образом jquery код будет инициализирован в момент помещения элемента в DOM древо.