title: Vue JS - lookup and retrieve details from json
body: <p>I am trying trying to create small billing application but am getting stuck in  working on the cost Lookup. I went through the <a href="https://v2.vuejs.org/v2/guide/list.html#key" rel="nofollow noreferrer">vueJs documentation</a> but that didnt help much.</p>
  <p>My piece of code is</p>
  <pre><code>    &lt;tr&gt;&lt;td&gt;&lt;input type=&quot;text&quot; v-model=&quot;prod0&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;number&quot; v-model=&quot;qty0&quot;&gt;&lt;/td&gt;&lt;td&gt;{{total0=cost0*qty0}}&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  <p>What i exactly need is to read the product id that user enters in <strong>prod0</strong>, lookup and retrieve the cost of it from json.</p>
  <p>My Json looks something like this.
  { &quot;Mango&quot;:&quot;100&quot;, &quot;Tomato&quot;:80, &quot;Carrot&quot;:&quot;120&quot; };</p>
  <p>Would be really helpful if someone could provide me some JSfiddle/reference on
  how to lookup a json, cross reference it and get the exact cost  by providing the product name.</p>