Блог

У меня есть следующее простое приложение Vue 3, которое делит дивиденд на делитель, отображая частное и остаток. Это позволяет пользователю выполнять различные вычисления, изменяя любое из четырех чисел:

 <div id="app">
<input type="text" v-model.number="dividend"> divided by <input type="text" v-model.number="divisor">
is
<input type="text" v-model.number="quotient"> remainder <input type="text" v-model.number="remainder">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
  data() { return {
    dividend: 100,
    divisor: 7
  }},
  computed: {
      quotient: {
        get: function() { return Math.floor(this.dividend / this.divisor); },
        set: function(v) { this.dividend = v * this.divisor   this.remainder; }
      },
      remainder: {
        get: function() { return this.dividend % this.divisor; },
        set: function(v) { this.dividend = this.quotient * this.divisor   v; }
      }
    }
}).mount("#app");
</script>
 

Это работает нормально, если только вы не попытаетесь ввести остаток, который >= делитель. В этом случае остаток корректируется — например, если делитель равен 7, и вы пытаетесь ввести остаток 9, вместо этого в качестве остатка отображается 2, а коэффициент увеличивается на 1. Я думаю, что это неинтуитивно-остальное должно вместо этого отражать то, что было введено. Итак, я изменил сеттер остатка на:

 set: function(v) { if (v < this.divisor) this.dividend = this.quotient * this.divisor   v; }
 

Теперь, если вы вводите слишком большой остаток, расчет не обновляется до тех пор, пока вы либо не исправите остаток, либо не измените одно из других значений.

Но в случае, если остаток слишком велик и расчет не обновляется, я хотел бы отобразить сообщение об ошибке для пользователя. Как я могу это реализовать?

watch могу сделать.

Добавьте новую опору для управления состоянием, и вы сможете проверить правильность ввода.

 <div v-if="!isValidInput">Your alert messages.</div>

data() { 
 return {
    dividend: 100,
    divisor: 7,
    isValidInput: true,
  }},
watch: {
    'dividend': function(val){
      if (your_conditions) {
        this.isValidInput = false;
      }
    },
    'divisor': function(val){
      if (your_conditions) {
        this.isValidInput = false;
      }
    }