origami1024

Вот официальная схема. Родители детям через props, назад через events.


1) Пример объявления child в template родителя

<child :somedata="data1" @bestEventEver="someMethod"/>

-передаешь данные из переменной родителя data1 чилду в пропс somedata.
-вешаешь метод родителя someMethod для обработки кастомного ивента 'bestEventEver', приходящего из чилда

2) В child вызываешь this.$emit('bestEventEver', 'params pam pams')

Есть сокращения этого для простых случаев через :v-model и .sync, читай официальный гайд

Но если, например, мне нужно, чтобы текст при изменении динамически менялся не только в textarea, но и в другом, изначально не связанном с textarea компоненте

Если нужно общение не уровня родитель-ребенок, а все со всеми, вот варианты

Ты нигде не вызываешь getMonthRate и getCoefficient, (кроме как при показе в этих параграфах) которые считают промежуточные данные. Вызывай эти computed при изменениях в инпутах.

Вот так работает, хотя код немного костыльный получился

Отвечая на вскидку - многим элементам ты задаешь расположение через margin-left margin-right, при этом в абсолютных единицах, тоесть px - пикселях.
Чтобы хорошо сделать нужно вникнуть в адаптивный/респонсивный дизайн и заранее планировать, где будет флекс контейнер с вложенными блоками (с автоматическим выравниванием по заданным правилам), где будут размеры заданы в процентах либо других относительных единицах, где будет медиазапрос, который скрывает элемент или перемещает его на определенных расширениях экрана.

Продлить выпадалку прозрачным верхним бордером.

*с учетом информации, предоставленной моим подразделением медиумов.

1. css св-во column-fill: auto;


UPD. Изменил ответ на более простой

Три варианта:
1. Посылать ивент в батю, батя пошлет деду, так до общего предка, общий предок спустит пропс своим наследникам.
2. Использовать Vuex, изменять там состояние, чтобы другой элемент просто обновлялся при изменении затрагивающих его состояний
3. Общаться напрямую через рут
Компонент1:
this.$root.$emit('eventing', data);
Компонент2:

mounted() {
  this.$root.$on('eventing', data => {
    console.log(data);
  });
}

Вариант без псевдоэлементов, фон через linear-gradient

.wrapper{
  text-align: center;
  background-image: 
  linear-gradient(transparent calc(49%), skyblue calc(49%), transparent calc(49% + 1px)),
  linear-gradient(transparent calc(49%), skyblue calc(49%), transparent calc(49% + 1px));
  background-size: calc(45% - 80px);
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0;
}

UPD: теперь корректно работает с картинкой на фоне

hr {
    border-bottom: 0;
}

new RegExp("#" + variable + "\\[" + prop + "\\]").exec(self)

Вот так работает. Моё понимание - один слэш съедается при объявлении, второй съедается при оценке регулярки.

По официальной ссылке там дальше есть простой пример как раз с форматированием даты.
vuetifyjs.com/en/components/date-pickers

Date pickers - formatting date
If you need to display date in the custom format (different than YYYY-MM-DD) you need to use the formatting function.

Потому что его родитель вылазит за пределы. Задай родителю overflow-x: hidden и всё будет чики пуки

.wrap_offs_left {
  overflow-x: hidden;
}

Можно всё на flex, и без дублирований, вота.

Вот тебе Vuetify компонент (созданный с учетом всех спецификаций material design гугла)
https://vuetifyjs.com/ru/components/selects#examples

UPD: более универсальный select

1. Смотря какая версия bootstrap. В новых можно убрать средствами bootstrap, добавив к кнопке класс shadow-none

2. Вариант через css

.btn:focus, .btn:active {
  box-shadow: none !important;
}

Владислав Лысков прав, только нужно еще !important
https://jsfiddle.net/jhd0pcru/

if(rad[i].src=="1.png"){
  ...
} else ...

В любом из вариантов всегда происходит условие для if, else просто игнорируется. В чём причина понять не могу

Ты ошибаешься, у тебя происходит условие для else,
потому что rad[i].src при проверке равен не "1.png", а
"http://www.полный-адрес/1.png"

вот переделал, чтобы проверка была с последней частью адреса

function change(){
  let rad = document.querySelectorAll('.red');
  for(let i=0, len=rad.length; i<len; i++){
    if(rad[i].src.split("/").pop()=="1.png"){
      rad[i].src="2.png"
    } else {
      rad[i].src="1.png"
    }
  }
}

https://jsfiddle.net/r37ck8oq/

Вот вариант:
1) Родителю белый фон
2) Самому блоку - бэкграунд родителя
3) На mouseMove изменять background-position соответственно перемещению блока
https://codepen.io/origami1024/pen/eYYRbmx

Вот вариант

Чтобы перезапустить анимацию нужно добавлять класс асинхронно с его удалением.

Замени
mainImg.classList.add("animate")

на

setTimeout(e=>{mainImg.classList.add("animate")},5)