Question

在我写作的单页应用程序中，中心功能有一个人可以开始的多个点。

问题

因此，举例来说，如果你知道你想要酿造多少咖啡，你就可以把它放进去，它会为你提供研磨量的配方，以获得最佳味道。但是，用户应该能够从他们可用的咖啡粉量开始。

根据我的理解和试错，到目前为止，你不能让两个输入都依赖于彼此的输入。如果您想查看一个有效的示例，我会将项目置于 here。

如果您调整了您想要冲泡的咖啡量，它会吐出所需的理由。但是，如果你以另一种方式工作并尝试改变理由，应该调整冲泡咖啡的量以及配方的其余部分。

输入

因此，对于每一杯咖啡，最终饮用量为$requiredGrounds*(50/3).

注意：50/3是提取率，除非我稍后更改，否则它是常量。

相反的数学函数用于推导出所需的咖啡渣量：$totalBrewedContent/(50/3).

守则

var calculator = new Vue({
el: '#calculator',
data: {
    totalBrewedContent: 200,
},
computed: {
    requiredGrounds: function(){
        return this.totalBrewedContent/(50/3)
    },
    totalBrewTime: function(){
        return this.requiredGrounds*10;
    },
    bpTime: function(){
        return this.totalBrewTime*(1/4);
    },
    mpTime: function(){
        return this.totalBrewTime*(1/4);
    },
    tpTime: function(){
        return this.totalBrewTime*(1/2);
    },
    bpWater: function(){
        return this.totalBrewedContent*(1/4);
    },
    mpWater: function(){
        return this.totalBrewedContent*(1/4);
    },
    tpWater: function(){
        return this.totalBrewedContent*(1/2);
    }
  }
})

Answer 1

所以简短的回答是你不能。你可能会得到一个无限循环。你应该做的是make requiredGrounds和totalBrewedContent数据对象，并使用eventing来触发更新它们的方法。

我已经设置了一个演示这个https://jsfiddle.net/vbranden/z3dvz4pe/

的小提琴

基本上，您可以创建2个方法

而不是计算属性

methods: {
    updateGrounds: function () {
        this.$set('requiredGrounds', this.totalBrewedContent / (50/3))
    },
    updateBrewed: function () {
        this.$set('totalBrewedContent', this.requiredGrounds * (50/3))
    }
}

然后在您的输入中绑定keyup事件以触发适当的方法，并使用v-model将数据对象绑定到输入

  <label>
    Desired Brew Amount (mL)
    <input type="text" v-model="totalBrewedContent" @keyup="updateGrounds">
  </label>
  <br>
  <label>
    Required Grounds Amount (g)
    <input type="text" v-model="requiredGrounds" @keyup="updateBrewed">
  </label>

具有直接关系的Vue.js的变量

问题

输入

守则

1 个答案: