Vuejsはネストされた配列にプッシュできません

Question

最初の質問はスタックのオーバーフローで、私は間違った場所で求めている場合はお詫び申し上げます。 Vueを初め、小規模なプロジェクトを完成させるために数日間試してみました。私はそれを単純化しましたが、ここはそれです。私は、必要な数の顧客名を入力し、必要な数の顧客の子どもの名前を追加できるようにしたいと考えています。つまり、ネストされた一連の子を持つ顧客の配列です。私は顧客を追加することができますが、私はなぜ私は子供の配列に新しい要素をプッシュできないのか分かりません。ここに私のコードです。

new Vue ({ 
el: '#app', 
data: function() { 
    return { 
      formdata: [], 
      fields: [{ 
       name: '', 
       childs: [{ 
        cname: '', 
       }] 
      }], 
     }; 
    }, 
    methods: { 
     addRow: function() { 
      this.fields.push({ 
       name: "", 
       childs: [{ 
        cname:'', 
       }], 
      }); 
     }, 
     addChild: function() { 
      this.child.push({ 
      }); 
     }, 
    }, 
}); 

そして、私のhtml

<div id="app"> 
    <button class="btn btn-success" @click="addRow">Add</button> 
    <div v-for="field in fields" > 
     <div class="input-group"> 
     <input type="text" placeholder="Name" class="form-control" v-model="field.name"> 
     </div> 
     <div v-for="child in field.childs" > 
     <div class="input-group"> 
      <input type="text" placeholder="Child" class="form-control" v-model="child.cname"> 
      <div class="input-group-btn"> 
      <button class="btn btn-success" @click="addChild">Add</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

ここでも、問題は、私はフィールドの配列に新しい「名前」を押すことができるということですが、私はフィールドの子配列に新しい子をプッシュすることはできません。私は子供の子供のフィールドフィールドなどのすべての順列を試して、その配列を参照する方法を見つけようとしています。どんな助けでも大歓迎です！

Answer 1

addChildメソッドでは、childsプロパティのfieldにアクセスする必要があります。現在、存在しないVueインスタンスのchildsプロパティにアクセスしようとしています。

あなたがそうのようなaddChild方法に関連するフィールドを渡す必要があります。その後、

<button class="btn btn-success" @click="addChild(field)">Add</button> 

そして渡されたfieldのchilds配列を参照するために、あなたのaddChildメソッドを更新：

addChild: function(field) { 
    field.childs.push({}); 
}