Question

我正在尝试创建小型结算应用程序，但我却陷入了成本Lookup的困境。我经历了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中检索它的费用。

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

如果有人能为我提供一些JSfiddle / reference，那将会非常有用如何查找json，交叉引用它并通过提供产品名称获得确切的成本。

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
  }
}