Alex_mos

let makeItDouble = (text) => {
  let i = text + text;
  return i;
};

console.log(makeItDouble("I never look back"));

Return всё прекрасно возвращает. Но то, что он возвращает, нужно сохранять в переменную или использовать сразу. Переменная i находится внутри функции и снаружи недоступна. Если бы можно было делать так, как вы написали, то и смысла в return бы не было.

@click="deleteTodo(todo)"

deleteTodo(todo) {
  this.todos.splice(this.todos.indexOf(todo), 1);
}

Или

v-for="(todo, index) in todos"
@click="deleteTodo(index)"

deleteTodo(index) {
  this.todos.splice(index, 1);
}

Это называется PWA(progressive web app).
Как сделать - гугли отдельно, нормальный ответ не влезет в рамки вопросника.

Внутри компонента:

<select>
  <template v-for="n in options">
    <option>
      <slot name="option" :option="n">{{ n }}</slot>
    </option>
  </template>
</select>

Снаружи:

<v-select :options="countries">
  <template #option="{ option }">{{ option.name }}</template>
</v-select>

https://jsfiddle.net/w6nuzamx/

Вы присваиваете внутри условия, а не сравниваете.
Сравнивают двойным или тройным знаком равенства.

Операция присвоения возвращает то, что присваивается. В обоих случаях у Вас это не пустая строка, что внутри условия интерпретируется как истина.
Так как это два последовательных if, не знающих друг о друге и не имеющих return внутри себя, то получаем:
1. если истина, то + 10.
2. если истина, то +5
2.1 иначе упс

https://stackoverflow.com/questions/61452458/ref-v...

в левой колонке же стрелочка. Раскройте пункт , там подуровень

Лови

Основные

.wrapper - /*обвертка сайта*/
.header - /*верхняя часть сайта*/
.sidebar - /*сайдбар (левая или правая часть сайта)*/
.content - /*тело сайта (центральная часть)*/
.footer  - /*нижнаяя часть сайта*/

Название блока (обвертка)

.bl 
.block 
.box
.wrap
.inner
.container
.main

Секции блока

.head, .header - /*верхняя часть блока например заголовок*/
.cnt, .content, .body - /*тело блока например текс с картинкой*/
.footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/

Колонки
.column, .col - /*колонка*/

Списки

.list
.item

Позиционные классы

.top /* элемент сверху */
.left /* элемент слева float:left */
.right /* элемент справа float:right */
.bottom /* элемент внизу */
.center /* элемент отцвентрирован  margin:0 auto; */
.fixed - /*фиксированный элемент postion:fixed */

Переходы

.next  - /*следующий*/
.prev  - /*предыдущий*/
.last  - /*последний*/
.first - /*первый*/
.back  - /*назад*/
.ahead - /*вперед*/

Чисельные

.one
.thwo
.three
.four
.five

Размеры

.xs, .tiny   - /*очень маленький*/
.s,  .small  - /*маленький*/
.md, .medium - /*средний */
.lg, .large, .big - /*большой */
.xl, .extra-large - /*очень большой*/

Цвета

.danger  - /*цвет опасности*/
.default - /*стандартный цвет*/
.warning, .error - /*цве ошибки*/
.success - /*цвет успеха (к примеру верно введн код подтвержления)*/
.primary - /*основной цвет */

Кнопки

.button, .btn - /*кнопка*/
.loading - /*загрузка*/
.close - /*закрыть*/
.open  - /*открыть*/
.touch - /*клик*/
.edit  - /*редактировать*/
.more  - /*больше*/
.remove  - /*удалить*/
.logout  - /*выход*/
.select  - /*выбрать*/
.divider - /*выпадающийся список меню*/
.caret, .arrow - /*стрелочка*/
.up - /* Вверх */
.down - /* Вниз */
.delete - /* удалить */
.reply    - /*ответить*/

Персона

.profile - /*профиль*/
.person - /*человек*/
.ava, .avatar - /*аватарка, картинка*/
.name - /*имя*/
.description - /*описание*/
.address  - /*адресс*/
.nickname - /*ник*/
.birthday - /*дата рождения*/
.sex - /*пол*/
.author - /* автор */

Заголовки

.title - /*заголовок*/
.short-title - /*скороченный заголовок*/
.full-title  - /*полный заголовок*/

Ссылки
.link - /*ссылка*/

Текст

.text, .txt, .paragraph  - /*текст*/
.info, .information - /*информация*/

Картинки

.image, .img - /*картинка*/
.icon, .ic   - /*иконка*/
.bg - /*фоновая картинки или цвет*/

Формы

.search, .form-search - /*поиск по сайту*/
.input - /*текстовый элемент*/
.form  - /*форма*/
.form-group - /*группа элементов формы*/
.help-block - /*текст подсказки*/
.label - /*название элемента формы*/

Катагории

.type - /*тип*/
.cat, .category - /*катигория*/
.subcat, .subcategory - /*подкатегория*/
.section    - /*раздел*/
.subsection - /*подраздел*/

Видео

.video
.play  - /*пуск*/
.stop  - /*стоп*/
.pause - /*пауза*/

Социальные сети

.social - /* социальные сети */
.vk   - /*вконтакте*/
.fb   - /*фейсбук*/
.twit - /*твиттер*/
.inst - /*инстаграм */

Активные классы

.none     - /*скрытый элемент*/
.disabled - /*заблокированный*/
.active, .current   - /*активный */
.selected - /*выбраный*/
.visible  - /*видный элемент*/
.focus    - /*нажатый*/

Временные классы

.time  - /*время*/
.date  - /*дата*/
.day   - /*день*/
.month - /*месяц*/
.year  - /*год*/

Очистка
.clear, .clearfix, .clr - /*очистка*/

Разделители

.separator, .divide - /*разделитель вертикальный для слов */
.br, .line - /*разделитель горизонтальный для блоков*/

Остоньлые названия

.logo    - /*лого сайта*/
.new    - /*новинка*/
.sale   - /*распродажа*/
.feedback - /*обратная связь*/
.support - /*помощь */
.group  - /*группа*/
.module - /*модуль*/
.posters - /*пост*/
.form   - /*форма*/
.tabs   - /*вкладки*/
.slider - /*слайдер*/
.news   - /*новости*/
.table  - /*таблица*/
.full   - /*полный*/
.breadcrumbs - /*Хлебные крошки*/
.pagination, .pager - /*Нумерация страниц*/
.navbar, .nav, .menu, .navigation - /*Навигация (меню)*/
.dropdown - /*выпадающейся меню */
.comment  - /*комментарий*/
.subscription - /* Подписка */
.special - /* особенный элемент */
.standard - /* стандартный элемент */
.screens - /* Скрины */
.rate - /* рейтинг */
.online - /* онлайн */
.panel - /* панель */
.popup - /* попап */
.version - /* версия */
.page - /* страница */
.banners - /* баннер */
.map - /* Карта */
.more - /*еще, подробнее*/
.tags - /* тег */
.price - /* цена */

Взято с этого видео.

вот так:

const disabled = ref(false);

<input :disabled="disabled">

<input type="checkbox" v-model="disabled">

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

<label>Your Image File
  <input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>

JSON это просто текст. это никакой не объект. чтобы с ним работать как с объектом, его нужно сначала спарсить в этот объект

Убери this
В шаблоне не нужно

const xxx = str => Array
  .from(str, (n, i) => n.toUpperCase() + n.toLowerCase().repeat(i))
  .join('-');

или

const xxx = str => str
  .toUpperCase()
  .split('')
  .reduce((acc, n, i) => `${acc}${i ? '-' : ''}${n}${Array(-~i).join(n.toLowerCase())}`, '');

или

const xxx = str => str
  .toUpperCase()
  .replace(/(?<=.)./g, (m, i) => '-'.concat(m, ...Array(i).fill(m.toLowerCase())));

HTML предназначен для отображения данных, не для хранения.

Хранить данные можно, например в json формате. Структуру можно прописать прямо на странице в теге script, или подгружать аяксом внешний json файл.