Vue – Кирилл Арутюнов

Правильный способ заставить Vue перендерить компонент

21 марта 2020

Эта публикация является любительским переводом статьи «The correct way to force Vue to re-render a component» от Майкла Тиссена.

Иногда бывает так, что реактивности Vue не хватает, и вам нужно перерендерить компонент. Или вам нужно сбросить DOM и начать сначала.

Так как же правильным образом заставить Vue перерендерить компонент?

Ответ прост. Правильный путь — использовать :key в компоненте. Когда вам нужно перерендерить компонент, вы просто меняете значение ключа и Vue обновит компонент.

Довольно просто, не так ли? Есть также и другие способы:

Худший вариант: обновить всю страницу,
Плохой вариант: использовать v-if хак,
Чуть лучше: использовать встроенный в Vue метод forceUpdate,
Лучший вариант: использовать изменение ключа.

Обратите внимание! Если вы столкнулись с ситуацией, в которой вам нужно перерендерить компонент, вероятно, есть более правильный способ решить задачу. Скорее всего, вы не до конца разобрались с чем-то из этого: 1. Реактивность Vue, 2. Computed-свойства, 3. Watch-свойства, 4. Не используете :key атрибут для v-for.

Как отключить eslint в vue-cli

13 января 2020

Судя по активности обсуждения issue на гитхабе, у многих есть проблема с отключением линтера при работе с vue-cli.

У нас это случилось во время работы с github-actions: мы собирали проект, прогоняли тесты. Локально всё собирается, а в github падает build. Начали выяснять — ругается eslint. Можно настроить всё, но это время. Быстрое решение — отключить линтер, чтобы билд заработал, а потом уже разобраться с линтером, как будет время.

Eslint можно отключить несколькими способами: файл .eslintignore, комментирование части кода в файле webpack.base.conf.js.

С помощью файла `.eslintignore`

Создаём файл. eslintignore в корне. Внутри файла пишем *, либо игнорим отдельные файлы или папки:

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

Закомменировать настройки в `webpack.base.conf.js`

Находим в файле build/webpack.base.conf.js настройки, относящиеся к линтеру и комментируем их:

{
  test: /.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: "pre",
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter')
  }
},

Как сделать редирект в Vue

9 января 2020

Эта публикация является любительским переводом статьи «How to Redirect in Vue» от Майкла Тиссена.

Содержание

Редирект на внутреннюю страницу
1. Чистый Vue (без Vue Router)
2. Vue Router
Редирект на внешнюю страницу
1. Чистый Vue (без Vue Router)
2. Vue Router
Заключение

На обычных страницах мы можем ссылаться на другие страницы с помощью указания ссылки через a-тег:

<a href="www.google.com">Google</a>

Если вы используете Vue Router, вы будете использовать специальный компонент RouterLink:

<RouterLink :to="www.google.com">Google</RouterLink>

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

Если вы используете Vue Router, то вы просто подставите ссылку в компонент роутера, в метод push:

this.$router.push('www.yoursite.com/blog')

В этой заметке мы рассмотрим все способы редиректа на внутренние и внешние страницы. Разберём случаи использования Vue с Vue Router и без него.

26 советов для Vue, которые сэкономят ваше время

28 ноября 2019

Эта публикация является любительским переводом статьи «26 Time Saving Tips for Vue» от Майкла Тиссена.

Никто не любит тратить своё время зря. При написании приложений на Vue вы можете потратить лишнее время на неправильные подходы. Новичку, а порой и опытному разработчику, не всегда известно, что станет камнем преткновения. В этой статье вы узнаете 26 полезных советов о разработке Vue-приложений, которые сэкономят ваше время и нервы!

Как в Blade вывести переменную Vue

31 октября 2019

Иногда возникает необходимость написать что-то вроде {{ $route.name }} внутри blade-шаблона в Laravel-приложении. Laravel тут же поругается, что такой переменной нет. Выход такой:

<div class="custom-block">
    @{{ $route.name }}
    ...
</div>

Используйте синтаксис @{{ }} для такой задачи.

Как скрыть шаблон Vue. js пока он не отрендерится. Директива [v-cloak]

24 августа 2019

Бывают ситуации, когда вы загружаете страницу с каким-то компонентом Vue, и при этом страница при загрузке «прыгает»: сначала показывает синтаксис шаблона Vue, а потом рендерит сам шаблон. Вот пример:

Страница загрузилась, а компонент Vue ещё не отрендерился

В чём разница между props и data в Vue. js

22 июля 2019

Во Vue предусмотрено два способа хранения данных в компоненте: props и data.

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

Так в чём же отличие между props и data?

Data — это приватное хранилище любого компонента, в котором вы можете хранить любые данные.

Props — то, как вы передаёте данные из родительского компонента в дочерний.

В этой статье вы узнаете:

Чем являются props, и почему они нужны только для передачи данных вниз;
Для чего используется data;
Что такое реактивность;
Как избежать конфликта имён между props и data;
Как одновременно использовать props и data вместе, чтобы получить пользу 💰

С помощью файла .eslintignore

Закомменировать настройки в webpack.base.conf.js

С помощью файла `.eslintignore`

Закомменировать настройки в `webpack.base.conf.js`