czy można przekazać parametr we właściwościach obliczeniowych w Vue.Js. Widzę, że jeśli gettery / setter używają obliczeń, mogą wziąć parametr i przypisać go do zmiennej. jak tutaj z dokumentacji :
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
Czy to również możliwe:
// ...
computed: {
fullName: function (salut) {
return salut + ' ' + this.firstName + ' ' + this.lastName
}
}
// ...
Gdzie obliczona właściwość przyjmuje argument i zwraca pożądane dane wyjściowe. Jednak gdy próbuję tego, pojawia się ten błąd:
vue.common.js: 2250 Uncaught TypeError: fullName nie jest funkcją (…)
Czy powinienem stosować metody w takich przypadkach?
javascript
vue.js
vuejs2
Saurabh
źródło
źródło
Odpowiedzi:
Najprawdopodobniej chcesz użyć metody
Dłuższe wyjaśnienie
Technicznie możesz użyć obliczonej właściwości z parametrem takim jak ten:
(Dzięki
Unirgy
za kod podstawowy za to.)Różnica między obliczoną właściwością a metodą polega na tym, że obliczone właściwości są buforowane i zmieniają się tylko wtedy, gdy zmieniają się ich zależności. Sposób oceni za każdym razem to się nazywa .
Jeśli potrzebujesz parametrów, w takim przypadku zwykle nie ma korzyści z zastosowania obliczonej funkcji właściwości w stosunku do metody. Chociaż pozwala to na powiązanie sparametryzowanej funkcji gettera z instancją Vue, tracisz buforowanie, więc naprawdę nie zyskujesz tam, w rzeczywistości możesz przerwać reaktywność (AFAIU). Więcej na ten temat można przeczytać w dokumentacji Vue https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods
Jedyna sytuacja jest przydatna, gdy trzeba użyć getter i trzeba mieć to parametryzowane. Taka sytuacja ma miejsce na przykład w Vuex . w Vuex jest to jedyny sposób, aby synchronicznie uzyskać sparametryzowany wynik ze sklepu (akcje są asynchroniczne). Dlatego podejście to jest wymienione w oficjalnej dokumentacji Vuex dla jego pobierających https://vuex.vuejs.org/guide/getters.html#method-style-access
źródło
<span v-text="fullName('Hi')"></span>
zamiast tego również działa.<span :text="message"></span>
, że nie działa już dla Vue 2.0, należy zamiast tego użyć:<span v-text="message"></span>
lub<span>{{ message }}</span>
jak pokazano w tym codepen: codepen.io/Ismael-VC/pen/dzGzJaMożesz używać metod, ale wolę nadal korzystać z obliczonych właściwości zamiast metod, jeśli nie mutują one danych lub nie mają efektów zewnętrznych.
W ten sposób możesz przekazać argumenty do obliczonych właściwości (nieudokumentowane, ale sugerowane przez opiekunów, nie pamiętam gdzie):
EDYCJA: Proszę nie używać tego rozwiązania, to komplikuje kod bez żadnych korzyści.
źródło
Cóż, technicznie rzecz biorąc, możemy przekazać parametr do funkcji obliczonej, tak samo jak możemy przekazać parametr do funkcji gettera w vuex. Taka funkcja jest funkcją, która zwraca funkcję.
Na przykład w pobierających sklep:
Ten moduł pobierający można zmapować na obliczone funkcje komponentu:
I możemy użyć tej obliczonej funkcji w naszym szablonie w następujący sposób:
Możemy zastosować to samo podejście do stworzenia metody obliczeniowej, która przyjmuje parametr.
I użyj go w naszym szablonie:
Biorąc to pod uwagę, nie mówię tutaj, że jest to właściwy sposób robienia rzeczy z Vue.
Widziałem jednak, że gdy element o określonym identyfikatorze zostanie zmutowany w sklepie, widok automatycznie odświeża jego zawartość dzięki nowym właściwościom tego elementu (wiązanie wydaje się działać dobrze).
źródło
Filtry to funkcjonalność zapewniana przez komponenty Vue, która umożliwia stosowanie formatowania i transformacji do dowolnej części dynamicznych danych szablonu.
Nie zmieniają danych komponentu ani niczego, ale wpływają tylko na wynik.
Powiedz, że drukujesz imię:
Zwróć uwagę na składnię, aby zastosować filtr, którym jest | filterName. Jeśli znasz system Unix, jest to operator potoku Unix, który służy do przekazywania wyniku operacji jako danych wejściowych do następnego.
Właściwość Filtry komponentu to obiekt. Pojedynczy filtr to funkcja, która przyjmuje wartość i zwraca inną wartość.
Zwrócona wartość to ta, która jest faktycznie wydrukowana w szablonie Vue.js.
źródło
Możesz także przekazywać argumenty do pobierających, zwracając funkcję. Jest to szczególnie przydatne, gdy chcesz wykonać zapytanie do tablicy w sklepie:
Zwróć uwagę, że metody pobierające dostępne za pomocą metod będą uruchamiane za każdym razem, gdy je wywołasz, a wynik nie będzie buforowany.
To się nazywa metoda-Style dostęp i to jest udokumentowane na docs Vue.js .
źródło
Są jednak przypadki, gdy trzeba to zrobić. Pokażę prosty przykład przekazywania wartości do obliczonej właściwości za pomocą gettera i settera.
I scenariusz
Po kliknięciu przycisku przechodzimy do obliczonej właściwości o nazwie „Roland” i in
set()
zmieniamy nazwę z „John Doe” na „Roland”.Poniżej znajduje się typowy przypadek użycia, gdy obliczony jest używany z getter i setter. Załóżmy, że masz następujący sklep vuex:
W swoim komponencie chcesz dodać
v-model
do danych wejściowych, ale korzystając ze sklepu vuex.źródło
Nie jestem do końca pewien, co próbujesz osiągnąć, ale wygląda na to, że wszystko będzie dobrze, używając metody zamiast obliczeń!
źródło
kiedy chcesz użyć
źródło
Obliczone można rozważyć ma funkcję. Tak więc dla przykładu waldacji możesz wyraźnie zrobić coś takiego:
Którego będziesz używać jak:
Pamiętaj tylko, że nadal będziesz tęsknił za buforowaniem obliczeniowym.
źródło
Tak, istnieją metody używania parametrów. Podobnie jak w przypadku odpowiedzi podanych powyżej, w twoim przykładzie najlepiej stosować metody, ponieważ wykonanie jest bardzo lekkie.
Tylko w celach informacyjnych, w sytuacji, gdy metoda jest złożona, a koszt jest wysoki, możesz buforować wyniki w następujący sposób:
Uwaga: Korzystając z tego, uważaj na pamięć, jeśli masz do czynienia z tysiącami
źródło