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

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

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

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

Q&A

解決済

4回答

527閲覧

dataの更新とmethodの呼び出しのタイミングが意図した挙動をしない(Vue js)

hi_se_pr

総合スコア21

Vue.js

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

0グッド

0クリップ

投稿2018/07/23 13:36

javascript

1<template> 2// 省略 3 <input type="text" v-on:keyup="test" v-model="input"> 4//省略 5</template> 6<script> 7 export default{ 8 9 data: function(){ 10 return{ 11 input:"" 12 } 13 } 14 methods: { 15 test(){ 16 if(this.input.length !== 0){ 17 //何らかの処理 18 }else{ 19 //エラー処理 20 } 21 } 22 } 23</script> 24

上のようなコードを書いたときに、keyupによりinputを検知してtest()を呼んでいるつもりなのですが、
(data:inputに入力値が反映される前に条件式に入ってしまうからか)エラー処理の方に行ってしまいます。

データの変更を検知してから処理を行うことはできるのでしょうか?
それともこの原因は他にあるのでしょうか

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

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

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

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

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

guest

回答4

0

ベストアンサー

v-modelに代入されるタイミングは、keyupイベントの後のため、この現象が発生しています。

方法1 v-on:input

keyupではなくinputを使用するのがベストかと思われます。

<input type="text" v-on:input="test" v-model="input">

方法2 nextTick

簡易的に実現する方法であれば、nextTickにより、DOM更新後に実行してあげる方法もありかと思います。

test(){ this.$nextTick(() => { if(this.input.length !== 0){ //何らかの処理 }else{ //エラー処理 } }) }

投稿2018/07/27 16:08

編集2018/07/27 16:10
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

すでに出ていますが watch を使うのが一般的だと思います。
それ以外だと v-modelv-bind:valuev-on:input の組み合わせですので

html

1<template> 2 <!-- 省略 --> 3 <input type="text" v-on:input="test" v-bind:value="input"> 4 <!-- 省略 --> 5</template> 6 7<script> 8export default { 9 data () { 10 return { 11 input: "" 12 } 13 }, 14 methods: { 15 test (e) { 16 this.input = e.target.value 17 if (this.val.length !== 0) { 18 // 何らかの処理 19 } else { 20 // エラー処理 21 } 22 } 23 } 24} 25</script>

みたいな感じでも実現できると思います。

投稿2018/07/25 12:45

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

keyup イベントを経由するのをやめて、ウォッチャで input の値を監視するのではどうでしょうか。

javascript

1watch: { 2 input(newValue, oldValue) { 3 if (newValue.length !== 0) { 4 // 何らかの処理 5 } else { 6 // エラー処理 7 } 8 } 9}

投稿2018/07/23 19:31

yhg

総合スコア2161

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

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

0

直接の原因かどうかはわかりませんが、2点構文上の問題があるように思います。

(1) カンマが足りない
(2) ブロックを閉じる中括弧が無い

この点を修正してもう一度動作確認してみてください。

<template> <!-- 省略 --> <input type="text" v-on:keyup="test" v-model="val"> <!-- 省略 --> </template> <script> export default { data () { return { val: "" } }, // (1) カンマを追加 methods: { test () { if (this.val.length !== 0) { //何らかの処理 } else { //エラー処理 } // (2) ブロックを閉じる中括弧を追加 } } } </script>

投稿2018/07/23 16:25

編集2018/07/23 16:32
rubytomato

総合スコア1752

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

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

hi_se_pr

2018/07/23 16:30

回答ありがとうございます。 teratailで質問するように慌てて書いてしまったものなのですが、実際のコードにかっこやカンマの不足はありませんでした、、、
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問