Javascript Vue JS-从json查找和检索详细信息

我正试图创建一个小型的计费应用程序，但却陷入了成本查找的工作中。我通过了考试，但没多大帮助

我的代码是

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

{{total0=cost0*qty0}

我真正需要的是读取用户在prod0中输入的产品id，从json中查找并检索其成本

我的Json看起来像这样。 {“芒果”：“100”，“番茄”：80，“胡萝卜”：“120”}

如果有人能为我提供一些关于 如何查找json，交叉引用它，并通过提供产品名称获得确切的成本。

在模板中：

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

Vue实例：

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

但我建议在这种情况下使用computed属性，因此您的模板只需要：

{{total}}

在Vue实例中，如果没有匹配的产品，则可以返回0：

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

工作示例：

---

谢谢@CodinCat，这真的很有帮助：）：）我想使用和计费软件一样的东西。有没有可能每个条目的{{total}}值都是唯一的。。我的意思是，我想通过查找产品成本的json值来计算total1=prod1*qty1、total2=prod2*qty2等等。。有什么建议吗？