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

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

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

我已经设置了一个 fiddle 来演示这个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))
    }
}

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

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