Vue JS - jsonから詳細を検索して取得します

Question

私は小額の請求書作成アプリケーションを作成しようとしていますが、コスト見積りに取り組んでいません。私はvueJs documentationに行ったが、それはあまり役に立たなかった。コードの

私の作品は、私は正確に何が必要

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

で、ユーザーはprod0に入るプロダクトIDを読んで、ルックアップとJSONからのコストを取得することです。

My Jsonはこのように見えます。 "マンゴー"： "100"、 "トマト"：80、 "ニンジン"： "120"}; ;

JSsonを参照する方法、JSsonを参照する方法、相互参照する方法、製品名を指定して正確なコストを得る方法などがあれば、本当に役に立ちます。テンプレートで

Answer 1

：

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

Vueのインスタンス：

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

しかし、あなたのテンプレートのみが必要になりますので、私は、このケースで計算されたプロパティを使用することをお勧めします：

{{total}} 

を

Vueインスタンスでは、一致する商品がない場合は0を返すことができます：

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

作業例： http://codepen.io/CodinCat/pen/JEGZgB?editors=1010