配列の中にあるオブジェクトを取り出したい。

Question

###前提・実現したいこと
Vuejsでボタンを押したら、入力フォームが追加され、フォームに追加した値をセットしてPUTしたいのですが、
配列(edit.add)にある複数のオブジェクトを取り出して、セットすることは可能なのでしょうか?

###該当のソースコード

 <div v-for="(fam, index) in edit.add" :key="index">
   <input type="text" v-model="fam.name">
 </div>
 <a href="#" @click.prevent="formAdd">+フォーム追加</a>
 <a href="#" @click.prevent="update">更新</a>

export default {
  data() {
    return {
       edit:{
          add: [{
            id: null,
            name: ''
          }]
        },
        editData:{},
     }
   },
   methods: {
     // 入力した値をPUTリクエストする
     update() {
       axios.put(`url`, {
        edit: [
          this.editData → {id:null, name="hoge"}の形でリクエスト送りたい
        ]
      })
      .then(response => {
   
      })
      .catch(error => {
        throw error;
      });
     },
      // フォーム追加ボタン
      formAdd() {
        edit.add.push({
           id: null,
           name: ''
        });
        this.editData = edit.add(配列)からオブジェクト({id: null, name: ''})を取り出してthis.editDataに格納したい
      }
    }
  }

Comments

[shika358]

複数の追加があった場合のupdateの挙動やthis.editDataの中身はどんな想定ですか？

[moro123]

updateの挙動はテキストフィールドに入力した値(fame.name)が更新され、this.editDataの中身は
{id: null, name: 'たくや'},{id: null, name: 'まさひろ'},{id: null, name: 'しんご'},{id: null, name: 'ごろう'},{id: null, name: 'つよし'},
みたいな形でedit: [this.editData]をおくりたいです。

Answer 1

this.editData = edit.add(配列)からオブジェクト({id: null, name: ''})を取り出してthis.editDataに格納したい
だけを実現するなら､array.push()で配列の末尾に値が入ります
またその戻り値が､配列のlengthですのでそれを使い配列の末尾を取得し
this.editDataにいれます｡
this.editDataの値はobjectですので参照渡しとなりますので､
フォーム上でedit.addを展開したものを変更しても問題と思います｡
※this.editDataが配列ならばpushすれば大丈夫です

この画面の想定にもよりますが､edit.addの値がすべてフォームに展開されていますので
すべての項目が編集可能となっております｡
新規登録画面を想定しているだけであればthis.editDataをすべて登録すれば問題ないと思います｡
更新登録画面を想定しているのであれば､既存の項目が変更されたかを判断し
その項目を更新､追加された項目を登録する､あるいは変更されたか否かは判断せずにすべての項目を登録､更新する必要があると思います｡