2016-12-15 11 views
6

Jeśli mam dwie obliczone właściwości, takie jak ten,Czy możliwe jest wykorzystanie obliczonych właściwości do obliczenia innych właściwości w Vue?

computed: { 
    id: function(){ return this.$route.query.id; }, 
    hasId: function(){ return this.$route.query.id !== undefined; } 
} 

jaki sposób mogę korzystać id obliczyć hasId jak ten pseudo-kodzie?

computed: { 
    id: function(){ return this.$route.query.id; }, 
    hasId: function(){ return id !== undefined; } 
} 
+0

'powrócić id' ->' powrócić this.id() 'rozwiązuje problemu – aaaaaa

+0

Dlaczego nie zamieścisz go jako odpowiedzi, aby mogła zostać zaakceptowana? –

+0

ponieważ nie można zgodzić się z komentarzem i często pojawiają się problemy w pytaniu OP, które są znane tylko dzięki wyjaśnieniu – aaaaaa

Odpowiedz

2

trzeba użyć prawidłowego zakresu dostępu do vue obliczane nieruchomości.

ponieważ używasz tylko id, przeszuka go w zasięgu globalnym, a nie znajdzie go i zwróci niezdefiniowany. Dla uzyskania vue własność komputerowej, trzeba zrobić: this.id, więc Twój kod będzie wyglądał jak następuje:

computed: { 
    id: function() { return this.$route.query.id; }, 
    hasId: function() { return this.id !== undefined; } 
} 

Wewnątrz komponentu this odnosi się do naszego Vue instance. Jednakże można uzyskać dostęp do $ trasy i innych podobnych funkcji z this, jak są one określone w Vue.prototype, patrz poniżej kod z vue-router:

Object.defineProperty(Vue.prototype, '$route', { 
    get: function get$1() { return this.$root._route } 
}) 
+0

Nie rozumiem tego. Proszę spojrzeć na mój komentarz do drugiej odpowiedzi @aaaaa, jeśli masz czas. 'this.id()' powinno odnosić się do bazowego obiektu Vue, a nie do aktualnie tworzonego komponentu, zgodnie z moim rozumieniem. Jestem pewien, że czegoś mi brakuje, ale co? –

+0

@KonradViltersten zaktualizował odpowiedź, daj mi znać, jeśli odpowie na twoje pytanie. – Saurabh

+0

'this' jest bardzo niewłaściwym konstruktem w javascript. Vue naprawdę nie powinien mieszać się z "tym" w mylących instancjach, takich jak "obliczony" obiekt. – aaaaaa

1

Twój pseudo kod był bardzo blisko. Wystarczy zmienić id do this.id()

computed: { 
    id: function(){ return this.$route.query.id; }, 
    hasId: function(){ return this.id() !== undefined; } 
} 
+0

Nie rozumiem, dlaczego to działa. Zgodnie z tym, co przeczytałem, w tym kontekście "this" odnosi się do obiektu Vue, a nie do samej instancji składnika (dlatego też działa np. 'This. $ Route' i to jest powód, dla którego nie mogę użyć nowej składni JS) prop:() => {...} '). Zgaduję, że 'this.id()' odnosiłoby się również do pewnej właściwości 'id' w głównym obiekcie Vue ... Czego mi brakuje, proszę? –

+0

Nie mogę mówić do vuejów, ale "ten" odnosi się do obiektu, którego właściwości posiada. W przypadku hasId "this" odnosi się do "computed". Również jeśli chcesz użyć nowej składni js, to 'hasId() {return this.id()! == undefined; } 'będzie drogą do zrobienia. – aaaaaa