Уроки VueJS: Вычисляемые свойства (Computed Properties)

В этом уроке вы узнаете:
- Что такое вычисляемые свойства (Computed Properties)?
- Главная ошибка начинающих при использовании методов VueJS

Ссылки к уроку:
Исходный код и интерактивное задание

Библиотека Fonts Awesome (иконки для сайта)

Комьюнити FructCode

Интерактивный курс VueJS

#fructcode #sergeinikonov

[fructcode]

Ссылки к уроку:
Исходный код и интерактивное задание


Библиотека Fonts Awesome (иконки для сайта)


Комьюнити FructCode


Интерактивный курс VueJS

[aleksandrgrippa]

Хорошо объяснили, спасибо!) И записанно качественно- все видно, слышно))

[ДмитрийЛуговской-дф]

По уроку все понятно. Но столкнулся с задачкой посерьезнее. А именно: из родителя передаю пропс selected в дочерний элемент (форма). В этом дочернем элементе есть поле из bootstrap-vue
<multiselect v-model="selected" placeholder="Выберите категорию" label="title" track-by="title"
:options="categories"
:multiple="true"
:taggable="true"
@tag="Select"
deselect-label="Невозможно удалить это значение"
></multiselect>
По логике создаем метод Select()
Select: function (){
this.addTag = this.selected
},
А вот как быть с computed, не разобрался
Пока так:
computed:{
addTag:{
get:function (){
return this.selected
},
set:function(newCat){
const cat = {
name: newCat,
}
this.categories.push(cat)
this.selected.push(cat)
}
}
}
Но каждый раз при выборе select
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "selected"

Функционал работает, в Api все передаю и делаю что нужно, но напрягает эта ошибка. И понимаю что здесь именно через computed надо это дело реализовать. Может кто подскажет?

[zemaskater]

С таким же успехом, мог прочитать документацию Vue. Тупо выучил статью и словами проговорил. Гений

[СергейСульженко-фя]

Очень крутое и полезное видео. Спасибо. Лайк. Подписка)

[Алексей-шэл]

Всё было очень понятно и классно, до того момента, когда вы начали говорить о set и get. Я не уловил связь, почему для использование set, который записан в computed, вы создаёте отдельный метод setName? И каким образом, он влияет на set в computed?

[artemy]

ты не объяснил почему methods вызывается 2 раза, хотя данные не затронуты при вызове кнопки. Просто констатировал факт, что вызывается дважды и все.

[Frontend-Developer-UA]

А что тогда писать в methods или вообще туда ничего не писать и все теперь писать только в computed ?

[frontman]

this.fullName = this.tempName
Не понимаю эту строку, разве мы не должны были написать
?

[artjom]

Сделал подобный тест в ангуляре, там вызывается ещё чаще.