LJ322

Обращайтесь к ним либо внутри метода

someFunction(el) {
  console.log(this.str)
}

либо в аргумент кидайте, когда метод вызываете someFunction(this.str)

Иконка состоит из окружности вокруг и элемента, который описывает внешнюю фигуру. Грубо говоря, стрелка по центру это не иконка, а то, что осталось. И принимает она цвет background своего родителя. Можно добавить обёртку для svg и менять у неё background-color. Либо попросить дизайнера отрисовать иконку по-другому

Stylelint
Он либо сам подсветит, либо в шторме к нему можно будет обратиться через CTRL+ALT+SHIFT+I и выбрать stylelint

const cancelable = fn => { // Создаётся функция cancelable, которая принимает функцию и сохраняет в переменную fn
  const wrapper = (...args) =>{ // Создаётся функция-обёртка, которая принимает любой набор аргументов
    if(fn) return fn(...args) // Если в cancelable была передана функция, то вызывает её с необходимыми аргументами
  }

  wrapper.cancel = () => fn = null // Добавляет свойство во wrapper для очистки переменной fn 

  return wrapper // Возвращает обёртку
}

const fn = par =>{ // Функция, которая оборачивается в декоратор со своим аргументом
  console.log('Function called, par:',par)
}

const f = cancelable(fn) // Создаёт обёртку вокруг fn

f('first') // Function called, par: first
f.cancel() // fn является переменной внутри cancelable, здесь мы её обнуляем
f('second') // Ничего не выводит, потому что условие у wrapper отрабатывает, только если функция есть

У вас на лейбле класс, а не айдишник висит. И вы неправильно к потомку обращаетесь:

let inputs = document.querySelectorAll('.input__file');
inputs.forEach(function (input) {
  input.addEventListener('change', function() {
    let label = this.nextElementSibling;
    let image = label.children[0]
    image.style.display = "none:
  }
);

Продолжай изучать JS по Кантору. В конце каждой секции есть задачи, выполняй все, не важно какой они сложности. По Proxy, Reflect и регуляркам можно вскользь пробежаться и не заострять внимание. Параллельно делай задачи на codewars, hackerrank, leetcode. Чем больше, тем лучше. Если в программировании с нуля, то желательно тысячу часов набить хотя бы.

Когда простые задачи начнёшь щёлкать как орешки, начинай читать про структуры данных и алгоритмы. По структурам данных можно в принципе любой источник брать, там всё одинаковое. Можешь глянуть вот эту репу. По алгоритмам советую посмотреть Яндекс. Там только базовые примеры разбираются, но на начальном этапе этого хватит. Когда преисполнишься в этих двух аспектах, начинаешь брать сложные задачи всё с тех же ресурсов (литкод и другие). Лучше даже это параллельно делать - изучать темы и решать задачи.

Опять же, параллельно с задачами выше начинай изучать webpack. Продолжай верстать, но уже добавлять какую-то логику на JS. Желательно ручками без плагинов, чтобы потом в дальнейшем настраивать эти плагины без особых проблем и вообще понимать что можно с их помощью сделать, а что нет.

Дальше можно прочитать Кайла Симпсона. К этому моменту ты скорее всего поймёшь, о чём в книге идёт речь.
Почитай про HTTP: тут и тут, знать как он работает - мастхэв для фронта. Теперь можно не просто верстать сайты, а заполнять их контентом через работу с API всевозможных сервисов.

Вот тут можно начинать изучать Typescript и переписывать всё, что сделал ранее, на TS. Самая лучшая практика, как по мне

Потом самое время выбрать фреймворк. Бери любой из понравившихся (кроме старья), читай доку и делай всё что выше, но уже на фреймворке. Со временем, если станет скучно, можешь залезть в их кишки, посмотреть как работает реактивность и другая "магия". Вообще фреймворк можно начать изучать и раньше, но я бы советовал к нему приступать, когда всё то же самое ты можешь сделать и без него. Это из личного опыта. Дока становится максимально понятной, не возникает дополнительных вопросов и в целом меньше косячишь.

По шаблонам и паттернам я раньше читал Рефакторинг Гуру (с енотом). Там примеры на Typescript. Ссылку не кину, мало ли что.

P.S. Все распиаренные курсы - хрень, не советую ими пользоваться. Тем более некоторые из них вообще составлены дилетантами. Это мой знакомый синьор говорил лет 5 назад. А позже я и сам пару раз столкнулся с этим (если в общем - такие ошибки даже стажёры в крупных компаниях не совершают).
Вместо этого следи за современными трендами, отслеживай каких-нибудь людей (я в своё время вот на этого парня наткнулся). Подпишись на какие-нибудь дайджесты типо www.awwwards.com. Смотри как делают другие, пробуй повторить. Рано или поздно начнут свои идеи появляться

Добавьте ещё одну реактивную переменную для промежуточного значения (куда будете старое сохранять до отправки запроса) и если условие не выполняется, то возвращайте её.

Потому что метод replace возвращает строку, а не изменяет. Строки в JS это неизменяемый тип данных. В данном примере нужно вернуть новый результат:

lab.textContent = lab.textContent.replace(/ pineapple/g, '')

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Прокидываете событие из Header выше, а в App отслеживаете его и дальше обрабатываете как вам нужно
https://codesandbox.io/s/easy-vue-js-search-forked...

Смотря как работаете с файлами на проекте. Можно подключать через /assets


Можно так же поместить их в /static, оттуда они не будут попадать в сборщик
Видел оба варианта на практике, разницу особо не ощутил.

Через computed свойство

<template>
  <header :class="pageClass">
...
  </header>
      <router-view/>
  <footer :class="pageClass">
...
  </footer>
</template>

<script>
export default {
  computed: {
    pageClass() {
      return {
        'page-class': this.$route.path === '/page',
      }
    }
  }
}
</script>

Для вашей задумки может подойти такой вариант. Сделайте обёртку флексом, а блок внутри, в котором отображаются спаны - обычным блоком

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 700px;
  height: 150px;
}
.chat {
  display: block;
  overflow-y: scroll;
}

Вот тут вы передаёте значение из атрибута в текстовое поле
text_data.textContent = text_data.dataset.info

Если нужно передать в инпут, то и обращайтесь к инпуту
input.value = text_data.dataset.info

Если нужно поменять дефолтное значение, то можете использовать defaultValue
input.defaultValue = text_data.dataset.info

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

<template>
  <div class="home">
    <img 
      alt="Vue logo" 
      src="../assets/logo.png"
    >
    <Modal
      v-if="modalOpen"
    >
      <div 
        v-html="someData"
      ></div>
    </Modal>

    <button 
      @click="modalIsOpen = !modalIsOpen"
    >
      Переключатель модалки
    </button>
  </div>
</template>

<script>
import Modal from '@/components/Modal.vue'
import { ref } from 'vue';

export default {
  name: 'Home',

  components: {
    Modal,
  },

  setup() {
    const modalIsOpen = ref(true);
    const someData = 'some data...';

    return { modalIsOpen, someData };
  },
}
</script>

Непосредственно за импорт в однофайловые компоненты отвечает vue-loader. А так да, импорт стилей, svg и т.д. обрабатывают соответствующие загрузчики вебпака