Vue 將新項目添加到 object 屬性的數組中

Question

我有一個這樣的數組：

campaigns = [
    {id: 1, adGroups: [{id: 1, title: 'Hello'}, {id: 2, title: 'Hello'}]},
    {id: 2, adGroups: [{id: 3, title: 'Hello'}, {id: 4, title: 'Hello'}]},
];

我使用v-for渲染數組：

<fieldset class="mb-3 p-3 rounded border" v-for="(campaign, index) in campaigns" :key="index">
    <fieldset class="mb-3 p-3 rounded border" v-for="(campaignAdGroup, indexAdGroup) in campaign.adGroups" :key="indexAdGroup">
        {{ campaignAdGroup.title }}
    </fieldset>
</fieldset>

沒關系，但現在我想在campaign.adGroups中添加一個新項目，但它似乎不起作用。

我已經使用$set function 將新項目添加到數組中，但它不起作用。

this.$set(this.ruleCampaigns[index].adGroups, this.ruleCampaigns[index].adGroups.length, {id: null, title: ''})

我如何在 VUE 中處理這種情況？

謝謝！

Answer 1

向數組添加元素時，不需要$set ，您可以使用.push方法：

 new Vue({ el: "#app", data() { return { campaigns: [ {id: 1, adGroups: [{id: 1, title: 'Hello'}, {id: 2, title: 'Hello'}]}, {id: 2, adGroups: [{id: 3, title: 'Hello'}, {id: 4, title: 'Hello'}]}, ] } }, methods: { add(index) { const campaign = this.campaigns[index]; const groups = campaign.adGroups; groups.push({ id: groups.length + 1, title: 'Hello' }); } } });

 <div id="app"> <fieldset class="mb-3 p-3 rounded border" v-for="(campaign, index) in campaigns":key="index"> <fieldset class="mb-3 p-3 rounded border" v-for="(campaignAdGroup, indexAdGroup) in campaign.adGroups":key="indexAdGroup"> {{ campaignAdGroup.title }} </fieldset> <button @click="add(index)">Add</button> </fieldset> </div> <script src="https://unpkg.com/vue"></script>