vueでFormData

Question

vueでFormDataを使い値を取得

dataやv-modelなどを利用せずにformの値をまとめて取得したい
serializeArrayみたいな感覚でできないでしょうか?

<template>
  <div>    
    <form ref="myForm">
      <input  type="text" value="foo">
      <input  type="text" value="bar">
      <button type="button" @click="getFormData()">getFormData</button>
    </form>
    
    <router-link to="/about">About page</router-link>
  </div>
</template>

<script>
    export default {
        methods: {
            getFormData: function () {
              const form = this.$refs.myForm;
              console.log(form);
              const formData = new FormData(form); // このあたりで
              console.log(formData.getAll());
            }
        }
    }
</script>

Comments

[Yatima]

dataやv-modelなどを利用したくないのはどういう理由でしょうか？むしろそちらを解決すべきというパターンかもしれないので一応聞いておきます

[euledge]

serializeArrayでも特に問題なく取得はできると思いますよ。

[tommyTeratail]

@Yatima アンケート用のコンポーネントでフォームデータの送信ができれば十分。の考えです inputタグが2~3個程度のコンポーネントです デザイナーから貰ったHTML（のフォーム部分）をそのままコピペで済んだら楽だなと、、、

[tommyTeratail]

@euledge jQueryの利用は避けたいです すみません

Answer 1

そもそもの話になりますが

アンケート用のコンポーネントでフォームデータの送信ができれば十分。の考えです

inputタグが2~3個程度のコンポーネントです
デザイナーから貰ったHTML（のフォーム部分）をそのままコピペで済んだら楽だなと、、、

2~3個程度ならば，一般的なVueの作法に従ったほうが，むしろ余計なことを考える必要がなく楽ではないでしょうか．
特殊なことをすると，のちのちトラブルの原因にもなりかねません．

Comments

[tommyTeratail]

そうですね
vueの作法に従うのが、良さそうですね
ありがとうございます