Vue JS - suchen und abrufen von Details aus JSON

Question

Ich versuche zu erstellen, kleine Billing-Anwendung, aber bin stecken in der Arbeit an der Kosten Lookup. Ich ging durch die vueJs documentation, aber das half nicht viel.

Code Mein Stück ist

<tr><td><input type="text" v-model="prod0"></td><td><input type="number" v-model="qty0"></td><td>{{total0=cost0*qty0}}</td></tr> 

Was ich genau das Produkt-ID lesen müssen, ist, dass Benutzer in prod0, Lookup tritt und die Kosten davon aus json abzurufen.

Mein Json sieht in etwa so aus. {"Mango": "100", "Tomate": 80, "Karotte": "120"};

Wäre wirklich hilfreich, wenn mir jemand JSfiddle/reference on zur Verfügung stellen könnte, wie man einen json sucht, Querverweis es und erhält die genauen Kosten, indem er den Produktnamen zur Verfügung stellt.

Answer 1

in Ihrer Vorlage:

{{total0 = products[prod0] * qty0}} 

Vue Beispiel:

new Vue({ 
    ... 
    data: { 
    products: { Mango: 100, Tomato:80, Carrot: 120 }, 
    prod0: '', 
    qty0: 0 
    } 
}) 

Aber ich würde empfehlen, berechnete Eigenschaft in diesem Fall zu verwenden, so dass Ihre Vorlage wird nur benötigt:

{{total}} 

In Ihrer Vue-Instanz können Sie 0 zurückgeben, wenn kein Produkt gefunden wurde:

computed: { 
    total() { 
    if (!this.products[this.prod0]) return 0 
    return this.products[this.prod0] * this.qty0 
    } 
} 

Arbeitsbeispiel: http://codepen.io/CodinCat/pen/JEGZgB?editors=1010