var MainTable = Vue.extend({
template: "<ul>" +
"<li v-for='(set,index) in settings'>" +
"{{index}}) " +
"{{set.title}}" +
"<button @click='changeSetting(index)'> Info </button>" +
"</li>" +
"</ul>",
data: function() {
return data;
}
});
Vue.component("main-table", MainTable);
data.settingsSelected = {};
var app = new Vue({
el: "#settings",
data: data,
methods: {
changeSetting: function(index) {
data.settingsSelected = data.settings[index];
}
}
});
W przypadku powyższego kodu poniższy błąd występuje po kliknięciu przycisku.
[Ostrzeżenie Vue]: Właściwość lub metoda „changeSetting” nie jest zdefiniowana w instancji, ale odwołuje się do niej podczas renderowania. Pamiętaj, aby zadeklarować reaktywne właściwości danych w opcji danych. (znaleziono w
<MainTable>
)
javascript
vue.js
vuejs2
vue-component
Lorenzo D'Isidoro
źródło
źródło
changeSetting
doMainTable
komponentu.Odpowiedzi:
Problem
Błąd występuje, ponieważ
changeSetting
wMainTable
komponencie występuje odwołanie do metody :"<button @click='changeSetting(index)'> Info </button>" +
Jednak
changeSetting
metoda nie jest zdefiniowana wMainTable
komponencie. Jest definiowany w głównym komponencie tutaj:var app = new Vue({ el: "#settings", data: data, methods: { changeSetting: function(index) { data.settingsSelected = data.settings[index]; } } });
Należy pamiętać, że do właściwości i metod można się odwoływać tylko w zakresie, w którym zostały zdefiniowane.
Możesz przeczytać więcej o zakresie kompilacji komponentów w dokumentacji Vue .
Co mogę z tym zrobić?
Jak dotąd dużo się mówiło o definiowaniu rzeczy we właściwym zakresie, więc rozwiązaniem jest po prostu przeniesienie
changeSetting
definicji doMainTable
komponentu?Wydaje się to takie proste, ale oto co polecam.
Prawdopodobnie chciałbyś, aby Twój
MainTable
komponent był elementem głupim / prezentacyjnym. ( Tutaj jest coś do przeczytania, jeśli nie wiesz, co to jest, ale tl; dr mówi, że komponent jest po prostu odpowiedzialny za renderowanie czegoś - bez logiki). Za logikę odpowiada element smart / container - w przykładzie podanym w pytaniu głównym komponentem byłby komponent smart / container. Dzięki tej architekturze możesz używać metod komunikacji rodzic-dziecko Vue do interakcji komponentów. Przekazujesz dane doMainTable
via props i emitujesz akcje użytkownika zMainTable
do jego rodzica poprzez zdarzenia . Może to wyglądać mniej więcej tak:Vue.component('main-table', { template: "<ul>" + "<li v-for='(set, index) in settings'>" + "{{index}}) " + "{{set.title}}" + "<button @click='changeSetting(index)'> Info </button>" + "</li>" + "</ul>", props: ['settings'], methods: { changeSetting(value) { this.$emit('change', value); }, }, }); var app = new Vue({ el: '#settings', template: '<main-table :settings="data.settings" @change="changeSetting"></main-table>', data: data, methods: { changeSetting(value) { // Handle changeSetting }, }, }),
Powyższe informacje powinny wystarczyć, aby zorientować się, co należy zrobić i zacząć rozwiązywać problem.
źródło
$root
. Np.this.$root.changeSetting(value)
Bezpośrednio z komponentuchangeSetting(..)
w tym przypadku.$root
ale generalnie nie jest to dobry pomysł. Zobacz tę uwagę na temat uzyskiwania dostępu do instancji root z dokumentacji Vue : „Może to być wygodne w przypadku wersji demonstracyjnych lub bardzo małych aplikacji z kilkoma komponentami. Jednak wzorzec nie skaluje się dobrze do aplikacji o średniej lub dużej skali, więc zdecydowanie zalecamy używanie Vuex do zarządzania stanem w większości przypadków. "Jeśli ktoś wyląduje z tym samym głupim problemem, co ja, upewnij się, że komponent ma poprawnie napisaną właściwość „ data ”. (np. dane , a nie data )
<template> <span>{{name}}</span> </template> <script> export default { name: "MyComponent", data() { return { name: "" }; } </script>
źródło
datas
w szablonie.Should anybody land with the same silly problem I had, make sure your component has the 'data' property spelled correctly.
Lol naprawdę bardzo poważny problem :) dzięki staryW moim przypadku powód był taki, że zapomniałem tylko o zamknięciu
etykietka.
Ale to spowodowało ten sam komunikat o błędzie.
źródło
Prawdopodobnie jest to spowodowane błędem w pisowni
Dostałem literówkę w tagu zamykającym skrypt
źródło
Dodając również mój bit, jeśli ktoś ma problemy jak ja, zauważ, że w metodach rozróżniana jest wielkość liter:
<template> <span>{{name}}</span> </template> <script> export default { name: "MyComponent", Methods: { name() {return '';} } </script>
„Metody” powinny być „metodami”
źródło
Jeśli używasz dwa razy vue. Wtedy da ci ten błąd. Na przykład w app.js i własnym tagu skryptu w pliku widoku. Po prostu użyj jeden raz
const app = new Vue({ el: '#app', });
źródło
Najprawdopodobniej jest to błąd w pisowni zarezerwowanych zmiennych vuejs. Dotarłem tutaj, ponieważ błędnie
computed:
napisałem, a vuejs nie rozpoznałby moich obliczonych zmiennych właściwości. Więc jeśli masz taki błąd, najpierw sprawdź pisownię!źródło
Wystąpił ten błąd, gdy próbowałem przypisać właściwość komponentu do właściwości stanu podczas tworzenia instancji
export default { props: ['value1'], data() { return { value2: this.value1 // throws the error } }, created(){ this.value2 = this.value1 // safe } }
źródło
Miałem dwa
methods:
w<script>
, po to aby pokazać, że można spędzić wiele godzin szukając czegoś, co było takie proste pomyłka.źródło
Mój problem polegał na tym, że umieszczałem metody wewnątrz mojego obiektu danych. po prostu sformatuj to w ten sposób i będzie dobrze działać.
<script> module.exports = { data: () => { return { name: "" } }, methods: { myFunc() { // code } } } </script>
źródło
Jeśli masz ten problem, sprawdź, czy nie
lub
oświadczył dwukrotnie
źródło
W moim przypadku była to właściwość, która dała mi błąd, poprawne pisanie i nadal dała mi błąd w konsoli. Szukałem tak dużo i nic dla mnie nie działało, dopóki nie dałem mu Ctrl + F5 i Voilá! błąd został usunięty. : „v
źródło