質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

6252閲覧

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

lefmarna

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/12/14 15:00

実現したいこと

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

前提

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

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

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

該当のソースコード

vue

1<template> 2 <div> 3 <v-text-field type="number" v-model="a"></v-text-field> 4 <v-text-field type="number" v-model="b"></v-text-field> 5 <p>a + b = {{ a + b }}</p> 6 </div> 7</template> 8 9<script> 10export default { 11 computed: { 12 a: { 13 get() { 14 return Number(this.$store.getters.a); 15 }, 16 set(value) { 17 if (value > 100) { 18 value = 100; 19 } else if (value < 0) { 20 value = 0; 21 } 22 this.$store.commit("update_a", value); 23 }, 24 }, 25 b: { 26 get() { 27 return Number(this.$store.getters.b); 28 }, 29 set(value) { 30 if (value > 100) { 31 value = 100; 32 } else if (value < 0) { 33 value = 0; 34 } 35 this.$store.commit("update_b", value); 36 }, 37 }, 38 }, 39}; 40</script> 41 42

JavaScript

1import Vue from "vue"; 2import Vuex from "vuex"; 3 4Vue.use(Vuex); 5 6export default new Vuex.Store({ 7 state: { 8 a: 0, 9 b: 0, 10 }, 11 getters: { 12 a: (state) => state.a, 13 b: (state) => state.b, 14 }, 15 mutations: { 16 update_a(state, value) { 17 state.a = value; 18 }, 19 update_b(state, value) { 20 state.b = value; 21 }, 22 }, 23}); 24

試したこと

ライフサイクルフックであるupdated内でif文の処理を行うことで、想定していた動作をさせることができました。
しかし、updated内でパラメーターを更新するのは、無限ループに陥るリスクがある点、他の箇所の更新時にも発火してしまう点を考慮すると、あまり好ましくはありません。
できれば、computedwatchmethodsを使って解決したいと考えています。
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"

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

Vue

1<template> 2 <div> 3 <!-- v-text-fieldの場合はrefを追加する --> 4 <v-text-field type="number" v-model="a" ref="input_a"></v-text-field> 5 <!-- inputの場合はidを追加する --> 6 <input type="number" v-model="b" id="input_b" /> 7 <p>a + b = {{ a + b }}</p> 8 </div> 9</template> 10 11<script> 12export default { 13 computed: { 14 a: { 15 get() { 16 return Number(this.$store.getters.a); 17 }, 18 set(value) { 19 if (value > 100) { 20 value = 100; 21 } else if (value < 0) { 22 value = 0; 23 } 24 this.$refs.input_a.lazyValue = value; // 追記 25 this.$store.commit("update_a", value); 26 }, 27 }, 28 b: { 29 get() { 30 return Number(this.$store.getters.b); 31 }, 32 set(value) { 33 if (value > 100) { 34 value = 100; 35 } else if (value < -1) { 36 value = 0; 37 } 38 document.querySelector("#input_b").value = value; // 追記 39 this.$store.commit("update_b", value); 40 }, 41 }, 42 }, 43}; 44</script> 45

投稿2020/12/15 06:35

lefmarna

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

投稿2020/12/15 02:26

編集2020/12/15 04:10
zushi0905

総合スコア683

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lefmarna

2020/12/15 03:09

回答ありがとうございます! 動作的にはそうですね、値が変わらないケースでは更新を検知できていない状態です。 maxやminも考えたのですが、キーボードからの入力だと上限を超えてしまうんですよね… キーボードからの入力でも検知させたいと考えています。 直接代入する方法については、methods内で this.a = 100; や this.$set(this, "a", 100); などは既に試していますが、どちらもうまくいっていません… 表示用と分ける案に関してはまだ試していないので、考えてみたいと思います。
zushi0905

2020/12/15 04:09

なんかそんな仕様でしたね。以前に直面した時は実装が綺麗に行かなかったのでバリデーションでエラー表示する形を取った気がします。 直接代入の表現が悪かったかもしれません。DOMをquerySelectorで取ってきて100より大きい時に100を詰め直す処理を書くことを言いたかったです。ただこれはvueの思想から外れる感じがするので規約を重要視するプロジェクトとかではあまり使わない方がいいかもしれないです。
zushi0905

2020/12/15 04:22

質問のままv-model使うならquerySelectorかrefsでDOMを取ってきてsetの部分で明示的に入れ直すのが丸そうですね。 watchがあまり好きで使ってこなかったので本当に行けるかはわかりませんが、watch+methodでも行けるかもしれません。 https://qiita.com/watsuyo_2/items/675c2ee09d011a2e61eb
lefmarna

2020/12/15 06:30

色々な手法を考えてくださり、ありがとうございます! 結論から言うと、refsのlazyValueというパラメータに値を代入することで解決できました。 querySelectorやwatch+methodも試したのですが、そちらはうまくいかず… ですが、これらがうまくいかなかったのは、Vuetifyのv-text-fieldを使っていたからであり、通常のinputタグではquerySelectorを使うことで書き換えることができました。(逆にinputタグには、lazyValueがありませんでした) 以下を参考にしました。 https://qiita.com/osyou84/items/4158b3fa07f745c10216 解決にご協力いただき、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問