FormData()で数を追加するときにできない理由について。

Question

・やりたい事
FormData()で作ったインスタンスに要素を追加する。

・ダメなところ
下記のようなコードで要素を追加したところ実際表示されたアウトプットが想定と異なる。

・出力方法
vue.jsで設定したbook_detilリストにformDataの値を入れてhtmlの変数設定場所でそのまま公開。

想定している出力結果
[{"id":"20"}]

実際の出力結果
[ {} ]

<div >
 　　{{book_detil}}
</div>

let clicked_id = '20';
let formData = new FormData();
formData.append("id",this.clicked_id);
this.book_detil = [formData];

わかる方がいれば教えていただけると嬉しいです。
宜しくお願い致します。

修正点
・formDataを[]で囲んだら出力結果が少し変わったが追加はされていない。

Comments

[int32_t]

どんなコードで表示して、どのような想定でしたか?

Answer 1

Vue.js

Vue.jsのコードが誤っている為に期待通りに動いていません。
公式サイトを確認しましょう。

• はじめに — Vue.js

Vue.jsのサンプルコード

• Vue.js サンプルコード - JSFiddle - Code Playground

<div id="sample1">{{message}}</div>
<div id="sample2">{{book_detil}}</div>

<form>
  <input type="hidden" name="foo" value="123" />
  <input type="hidden" name="bar" value="abc" />
  <input type="hidden" name="baz" value="xyz" />
</form>

<script>
'use strict';
new Vue({
  el: '#sample1',
  data: {
    message: 'Hello Vue!'
  }
});

new Vue({
  el: '#sample2',
  data: {
    book_detil: JSON.stringify(Array.from(new FormData(document.querySelector('form'))))
  }
});
</script>

Re: con2319 さん

Comments

[con2319]

ありがとうございます。参考にさせていただきます。

Answer 2

FormDataから値を回収するには、entriesやkeys、valuesといったメソッドでIteratorを得て、それをスプレッドやfor-ofなどを使って回収する必要があります。

ふつうのオブジェクトのように参照しようとしても結果は得られません。

Comments

[con2319]

なるほど～FormDataからデータを取得するのはめんどくさそうですね。
ちなみにformdataをデータの送信以外で使用する場面は結構多いですか？

[maisumakun]

> formdataをデータの送信以外で使用する場面は結構多いですか？

送信と無関係な場面で、そんなに引き回すものでもない気はします。

[con2319]

でしたらよかったです。
値がどんな感じで格納されているかの一時的な確認での表示なので常用するつもりはありませんでした。
色々教えていただきましてありがとうございました。