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>
回答2件
あなたの回答
tips
プレビュー