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

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

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

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

JavaScript

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

Q&A

解決済

2回答

3349閲覧

【Vue.js】input に入力された値を computed で処理しつつリアルタイムに view に反映したい

machine_machine

総合スコア162

Vue.js

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

JavaScript

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

0グッド

1クリップ

投稿2017/05/16 07:25

編集2017/05/16 09:46

keyup のタイミングである処理をしてリアルタイムに view に反映したいと考えています。

下記のコードは質問用に作成した簡易的なものです。

v-model の値(this.text)は確定前でも入力にあわせリアルタイムに反映されるのですが、
ある処理を入れた this.computedText はエンターなどで確定しないと画面に反映されません。

任意のタイミングで view に反映する方法はあるかご存じのかたいらっしゃいますでしょうか。
よろしくお願いいたします。

<div id="app"> <input type="text" @keyup="onKeyup" v-model="text"> <p>{{ text }}</p> <p>{{ computedText }}</p> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script> <script> new Vue({ el: '#app', data: function() { return { content: '', text: '' } }, methods: { onKeyup: function(e) { this.content = e.currentTarget.value; } }, computed: { computedText: function() { return this.content + '!'; } } }); </script>

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

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

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

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

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

gouf

2017/05/16 10:29 編集

keyup を/で 表示させている<p/> タグ内の変数、 text → content へ変更するのは問題ありますでしょうか?
philomagi

2017/05/16 15:04 編集

「this.textは確定前でも入力に合わせリアルタイムに反映される」が、「coumputedTextではエンターなどで確定しないと画面に反映されない」とありますが、問題になっているのは全角入力時(日本語を入力していて、変換を確定する前)という理解で良いでしょうか。
guest

回答2

0

ベストアンサー

@input (v-on:input) を併せて利用してはどうでしょうか?

Can I use

html

1<input type="text" @input="onInput" @keyup="onInput" v-model="text">

ただ、適宜debounce等入れるて処理が複数回実行されないようにする必要があるかもしれません。

投稿2017/08/25 15:05

pulse

総合スコア17

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

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

0

computedは依存する変数が更新されると更新されます。
この場合 computedText が書き換わるのは this.content が変更されたタイミングです。
そして this.content は @keyup で書き換えられているのでキーを上げるまで更新されません。
この例で言えば

js

1computed: { 2 computedText: function() { 3 return this.text + '!'; 4 } 5}

こうすれば、 this.text と全く同じタイミングで更新されます。

computed

算出プロパティはキャッシュされ、そしてリアクティブ依存が変更されたときにだけ再算出します。ある依存関係がインスタンスのスコープ外の(つまりリアクティブではない)場合、算出プロパティは更新されないことに注意してください。

投稿2017/07/23 14:45

編集2017/07/23 14:48
watanuki_p

総合スコア45

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問