[Vuejs]-Vue JS – lookup and retrieve details from json

0πŸ‘

In your template:

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

Vue instance:

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

But I’d recommend to use computed property in this case, so your template will only need:

{{total}}

In your Vue instance, you can return 0 when there is no product matched:

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

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

Leave a comment