将 vuejs 中的 2 个输入与中间的计算双重链接

Posted 2023-02-22

【中文标题】将 vuejs 中的 2 个输入与中间的计算双重链接

【英文标题】：doubly linking 2 inputs in vuejs with a computation in the middle

【发布时间】：2019-03-14 21:28:39

【问题描述】：

用文字解释我想要实现的目标对我来说很困难，因为我对 vue.js 很陌生。

我知道我可以使用 v-model 将输入链接到变量，但是，我想将输入链接到变量，进行计算，并将其显示在另一个输入中。我还需要另一个输入来进行逆计算并将结果显示在第一个输入中。

好的，在沙拉这个词之后，这是我需要的确切行为的示例。

您可以在任一输入中键入一个值，另一个输入将显示转换。我怎样才能以最好的方式实现这一目标？有没有办法避免 hacky 解决方案，例如条件取决于哪个框处于活动状态的 if 语句？

顺便说一句：在我理解正确的逻辑后，我会将所有这些都转移到 Vuex 中吗？ vuex 中的某些东西可以处理这种情况吗？

【问题讨论】：

很好的问题（而且措辞得体）。你有没有尝试过？

【参考方案1】：

为此，您可以将 <input> 元素绑定到计算属性，每个属性都有一个 setter。

当您更新一个输入时，您可以相应地设置两个输入的值。

例如...

const mul = 1.5

new Vue(
  el: '#app',
  data: 
    val1: null,
    val2: null
  ,
  computed: 
    input1: 
      get () 
        return this.val1
      ,
      set (val) 
        this.val1 = val
        this.val2 = (val * mul).toFixed(2) // multiply to set val2
      
    ,
    input2: 
      get () 
        return this.val2
      ,
      set (val) 
        this.val2 = val
        this.val1 = (val / mul).toFixed(2) // divide to set val1
      
    
  
)

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
<p>
<label for="input1">Input #1:</label>
<input id="input1" v-model="input1" type="number">
</p>
<p>
<label for="input2">Input #2:</label>
<input id="input2" v-model="input2" type="number">
</p>
</div>

【讨论】：

仅供参考，您不必必须使用toFixed()，但我认为这会是一个不错的选择

嗨，菲尔，很抱歉，我没有看到您之前关于进展情况的评论。我已经出城了。您的解决方案完美运行。我仍然遇到的唯一问题是，当我也更改选择框的值时，我需要更新这些值。必须有一个简单的方法来做到这一点。我尝试过使用 v-on:change 指令，但似乎我找不到任何东西都可以做到。我的直觉是让函数更通用，并在模板中需要任何更改时调用它们。