Vue JS — Параметры для реактивного интерфейса

Vue JS — Параметры для реактивного интерфейса

От автора: существуют во Vue JS параметры для добавления реактивности свойствам, которые добавляются динамично. Давайте представим, что мы уже создали экземпляр vue и нам нужно добавить свойство watch.

Это можно сделать следующим образом:

В объекте данных есть счётчик свойств, инициализированный со значением 1. Счётчик увеличивается при нажатии на кнопку. Экземпляр Vue уже создан. Чтобы добавить к нему watch, нам нужно сделать следующее:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Нам нужно использовать $watch, чтобы добавить watch вне экземпляра vue. Появляется предупреждение, которое сообщает об изменении значения свойства counter. Добавляется также функция таймера, то есть setTimeout, которая задаёт значение счётчика 20.

Когда бы не был изменён счётчик, от метода watch будет запускаться предупреждение, как продемонстрировано на следующем скриншоте.

VueJS не может обнаружить добавление и удаление. Лучше всего всегда объявлять свойства, которые предварительно должны быть реактивными в экземпляре Vue. Если нам нужно на ходу добавлять свойства, то можно использовать методы Vue global, Vue.set и Vue.delete.

Vue.set

Этот метод помогает задавать свойство объекту. Его используют для того, чтобы обойти ограничения Vue, который не может обнаружить добавления свойств.

Синтаксис

target — может быть объект или массив

key — строка или число

value — любой тип

Давайте рассмотрим пример.

В вышеприведённом примере мы видим переменную myproduct, созданную в начале при помощи следующего кода.

Она передаётся объекту данных в экземпляре Vue следующим образом:

Представим, что после создания экземпляра Vue мы хотим добавить ещё одно свойство к массиву myproduct. Это можно сделать следующим образом:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Давайте посмотрим на результат в консоли.

Как мы видели ранее, в products добавляется количество. Методы get/set, которые фактически добавляют реактивность, являются доступными для id, name и price, и недоступными для qty.

Мы не можем добиться реактивности, просто добавив объект vue. VueJS, как правило нужно создавать все его свойства в начале. Однако, если нам нужно добавить их позже, то можно использовать Vue.set. Для этого нам нужно задать их используя vue global, то есть Vue.set.

Мы использовали Vue.set, чтобы добавить qty к массиву при помощи следующего кода.

Мы консолидировали объект vue и вот какой результат получили.

Теперь мы видим, что get/set были добавлены к qty при помощи Vue.set.

Vue.delete

Эта функция используется для того, чтобы динамично удалить свойство.

target — может быть объект или массив

key — строка или число

Чтобы удалить еще какой-нибудь код, мы можем использовать Vue.delete:

В приведённом выше примере мы использовали Vue.delete, чтобы удалить price из массива при помощи следующего кода.

В консоли мы увидим следующий результат.

После удаления мы сможем увидеть только id и name, поскольку price удалён. Мы можем видеть, что методы get/set также удалены.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree