LoginSignup
8
5

More than 3 years have passed since last update.

Vuetifyのv-text-fieldからメソッドへidを送る方法

Last updated at Posted at 2019-08-22

最近Vue+Vuexはじめました。

いきなり本題ですが、下記のようにv-text-fieldの変更を@changeからメソッドに引き渡し、
idと変更内容を受け取ろうとしてみました。こんな感じで。

          <v-text-field
            id="text1"
            label="テキスト"
            @change="updateField($event)"
          ></v-text-field>
  methods: {
      updateField(e){
        console.log(e.target.id,e.target.value)
      },
}

が、、動かないな???なんでかな??
とりあえずinputは動くからinputで受けるか、、、
inputの戻り値はstringで入力した内容だけなので、第2に手動でidを指定してと、、、

          <v-text-field
            id="text1"
            label="テキスト"
            @input="updateField($event,'text1')"
          ></v-text-field>
  methods: {
      updateField(e,_id){
        console.log(e,_id)
      },
}

結果

[変更内容] undefined

なんでや!!!

こうしてみたら・・・?

          <v-text-field
            id="text1"
            label="テキスト"
            @input="updateField([$event,'text1'])"
          ></v-text-field>
  methods: {
      updateField(e){
        console.log(e)
      },
}

結果

(2) ["[変更内容]", "text1"]

ヤレバデキルジャン☺️

しかしなぜ@changeが効かないのか・・・。
あんまりこのやり方もスマートではないので解決策が欲しいところ。

ちなみに、

updateField({id:'text1',value:$event})

とオブジェクトでこんなふうにも渡せます。こっちのが一般的か。

8
5
2

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
8
5