Как заставить два входа реагировать друг на друга в Vue.js - PullRequest
Новая
       15

Как заставить два входа реагировать друг на друга в Vue.js

0 голосов
/ 02 апреля 2019

Я создаю инструмент для расчета стоимости покупки определенного материала.Проблема в том, что иногда пользователь покупает его либо по массе, либо по объему.

Я хотел бы иметь способ иметь два активных входа (масса и объем), и каждый автоматически обновляется с учетом плотности материала.

Я попробовал вычисленные свойства и наблюдатели, но не смог заставить его работать должным образом.

Вот как я хотел бы, чтобы это выглядело, и как я пытался https://jsfiddle.net/yfuk958j/

  Mass = <input v-model.number="mass"> <br/> 
  Volume = <input v-model.number="volume"><br/>

  computed: {
    volume() {
      return this.mass * this.density
    },
    mass () { 
    return this.volume / this.density 
    }
   }

1 Ответ

1 голос
/ 02 апреля 2019

Все, что вам нужно, это 2 входа, каждый из которых привязан к свойству вашего виртуального компьютера. И функция часов для обновления любого из них при изменении другого: 

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  data: {
    density: 1,
    mass: 1, 
    volume: 1,
    inputType: 'mass'
  },
  watch: {
    mass(val) {
      this.volume = val/this.density;
    },
    volume(val) {
      this.mass = val*this.density;
    },
    density(val) {
      this.volume = this.mass/val;
    }
  },
  methods: {
    round(val) {
      return Math.round(val * 1e3)/1e3
    }
  }
})
span {min-width: 100px; display: inline-block;}
input[type="range"] {width: 200px;}
input[type="number"] {width: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <span>Density:</span> <input v-model="density" type="range" min=".1" max="10" step="0.1">{{density}}g/cm<sup>3</sup>
  </div>
  <div>
    <div>
      <span>Mass:</span> <input v-model="mass" type="range" min="1" max="1e4" step="0.001">
      <input v-model="mass" type="number" min="1" step="0.1" max="1e4">g
      [Volume: {{round(volume)}}cm<sup>3</sup>]
    </div>
    <div>
      <span>Volume:</span> <input v-model="volume"  type="range" min="2" max="1e4" step="0.001">
      <input v-model="volume"  type="number" min="2" max="1e4" step="0.1">cm<sup>3</sup>
      [Mass: {{round(mass)}}g]
    </div>
  </div>
</div>
...