Vueでinput(type=number)の値に上限・下限を超えて入力できないようにしたい！

Question

実現したいこと

Vueでinputタグの中に入力された値を使って、計算するプログラムを作っています。
inputタグには上限(100)と下限(0)を設定し、それを超えて入力された場合には、強制的にその値に置き換える（100を超えて入力できなくする）プログラムを書こうとしています。

前提

Vue CLIで作成したプロジェクトを使っています。
値の管理はVuexを使って行っています。
inputタグにはv-modelでデータバインディングを行い、computedプロパティで受け取っています。
UIコンポーネントのVuetifyを使用しているため、ソースコードではinputタグの拡張であるv-text-fieldを使用しています。

発生している問題・エラーメッセージ

初回のみ999→100のように更新をしてくれるのですが、その後、1009,10099,100999となってしまいます。
計算結果には反映されているようなのですが、入力を抑制することができていません。

該当のソースコード

<template>
  <div>
    <v-text-field type="number" v-model="a"></v-text-field>
    <v-text-field type="number" v-model="b"></v-text-field>
    <p>a + b = {{ a + b }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    a: {
      get() {
        return Number(this.$store.getters.a);
      },
      set(value) {
        if (value > 100) {
          value = 100;
        } else if (value < 0) {
          value = 0;
        }
        this.$store.commit("update_a", value);
      },
    },
    b: {
      get() {
        return Number(this.$store.getters.b);
      },
      set(value) {
        if (value > 100) {
          value = 100;
        } else if (value < 0) {
          value = 0;
        }
        this.$store.commit("update_b", value);
      },
    },
  },
};
</script>

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    a: 0,
    b: 0,
  },
  getters: {
    a: (state) => state.a,
    b: (state) => state.b,
  },
  mutations: {
    update_a(state, value) {
      state.a = value;
    },
    update_b(state, value) {
      state.b = value;
    },
  },
});

試したこと

ライフサイクルフックであるupdated内でif文の処理を行うことで、想定していた動作をさせることができました。
しかし、updated内でパラメーターを更新するのは、無限ループに陥るリスクがある点、他の箇所の更新時にも発火してしまう点を考慮すると、あまり好ましくはありません。
できれば、computedやwatch、methodsを使って解決したいと考えています。
v-modelを:valueと@inputに分けてmethodsで変更させたり、Vuexで受け取ったあとにmutationの中で処理させたり、もちろんwatchでの更新も試しましたが、いずれもうまくいかない状況です。
何か良い方法があれば、ご教授いただきたいです。

補足情報（FW/ツールのバージョンなど）

"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.2.11",
"vuex": "^3.4.0"

Answer 1

<template>
  <div>
    <!-- v-text-fieldの場合はrefを追加する -->
    <v-text-field type="number" v-model="a" ref="input_a"></v-text-field>
    <!-- inputの場合はidを追加する -->
    <input type="number" v-model="b" id="input_b" />
    <p>a + b = {{ a + b }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    a: {
      get() {
        return Number(this.$store.getters.a);
      },
      set(value) {
        if (value > 100) {
          value = 100;
        } else if (value < 0) {
          value = 0;
        }
        this.$refs.input_a.lazyValue = value; // 追記
        this.$store.commit("update_a", value);
      },
    },
    b: {
      get() {
        return Number(this.$store.getters.b);
      },
      set(value) {
        if (value > 100) {
          value = 100;
        } else if (value < -1) {
          value = 0;
        }
        document.querySelector("#input_b").value = value; // 追記
        this.$store.commit("update_b", value);
      },
    },
  },
};
</script>

Answer 2

これは初回に100がvuex側にセットされ、２回目以降はcomputedのset関数で永遠に同じ数字がセットされ続ける為検知されない為にinputの見た目の数が増えていってる感じですかね。

html側でmax,minを設定してあげる感じでいいと思います。もし開発者ツールからmax,minを外されとしても内部的にはちゃんとバリデーションされた後の0~100の値が入ってる訳なので大丈夫ではないでしょうか。

直接inputに値を入れ直す方法とか、仮変数を用意して表示用と分けて毎回@inputで変更させるとか出来そうですが、パフォーマンスの面を考えると@input使わずにmax,min使えばいいんじゃないかと思います。

Comments

[lefmarna]

回答ありがとうございます！

動作的にはそうですね、値が変わらないケースでは更新を検知できていない状態です。
maxやminも考えたのですが、キーボードからの入力だと上限を超えてしまうんですよね…　キーボードからの入力でも検知させたいと考えています。

直接代入する方法については、methods内で this.a = 100; や this.$set(this, "a", 100); などは既に試していますが、どちらもうまくいっていません…
表示用と分ける案に関してはまだ試していないので、考えてみたいと思います。

[zushi0905]

なんかそんな仕様でしたね。以前に直面した時は実装が綺麗に行かなかったのでバリデーションでエラー表示する形を取った気がします。

直接代入の表現が悪かったかもしれません。DOMをquerySelectorで取ってきて100より大きい時に100を詰め直す処理を書くことを言いたかったです。ただこれはvueの思想から外れる感じがするので規約を重要視するプロジェクトとかではあまり使わない方がいいかもしれないです。

[zushi0905]

質問のままv-model使うならquerySelectorかrefsでDOMを取ってきてsetの部分で明示的に入れ直すのが丸そうですね。

watchがあまり好きで使ってこなかったので本当に行けるかはわかりませんが、watch+methodでも行けるかもしれません。
https://qiita.com/watsuyo_2/items/675c2ee09d011a2e61eb

[lefmarna]

色々な手法を考えてくださり、ありがとうございます！

結論から言うと、refsのlazyValueというパラメータに値を代入することで解決できました。

querySelectorやwatch+methodも試したのですが、そちらはうまくいかず…
ですが、これらがうまくいかなかったのは、Vuetifyのv-text-fieldを使っていたからであり、通常のinputタグではquerySelectorを使うことで書き換えることができました。（逆にinputタグには、lazyValueがありませんでした）

以下を参考にしました。
https://qiita.com/osyou84/items/4158b3fa07f745c10216

解決にご協力いただき、ありがとうございました！