10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vuetifyでv-model.lazyしたい

Posted at

自社プロダクトのフロントエンドでVue.jsとVuetifyを使っています。

Vuetifyのテキストフィールド(v-text-field)でv-model.lazyを適用したら、挙動が.lazy修飾子がない場合の挙動と同じだったので調べて分かったことをメモ_φ(・_・

Vue.jsの公式ドキュメントよりv-model.lazyは

デフォルトでは、 v-model は各 input イベント (上記の IME 確定前を除いて) 後に、データと入力を同期します。 change イベント後に同期するように変更するために lazy 修飾子を追加することができます

とのことなので、以下のようにVuetifyのテキストフィールド(v-text-field)にも同じように適用したら、inputのたびに更新処理が走り、期待する動作(changeイベントで更新)になりませんでした。

<v-text-field v-model.lazy="name"></v-text-field>

さらに調べると、以下のGithubのissuesに辿り着き、v-modelの修飾子はVuetify等のカスタムコンポーネントではサポートしていないということが分かりました。

v-text-field v-model lazy doesn't work #1810

v-modelはv-onとv-bindをまとめて一行で書くためのシュガーシンタックスなので、v-onとv-bindをそれぞれ書き分けることで、changeイベントで更新が発動する処理が実現できました。

<v-text-field :value="name" @change="value => name = value"></v-text-field>

<script>
  props: {
    person: Object
  },
  computed: {
    name: {
      get () {
        return this.person.name
      },
      set (name) {
        this.$emit('change', name)
      }
    }
  }
10
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?