Vue将新项目添加到对象属性的数组中答案

【问题标题】：Vue add new items to array of an object propertyVue将新项目添加到对象属性的数组中
【发布时间】：2021-05-27 14:33:50
【问题描述】：

我有一个这样的数组：

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 函数向数组添加新项目，但它不起作用。

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

如何在 VUE 中处理这种情况？

谢谢！

【问题讨论】：

你试过this.ruleCampaigns[index].adGroups.push({id: null, data: {bid: ''}})吗？
@LucasMarcondesPavelski 是的，我尝试过，但效果不佳。
@shob 当我添加新项目时，UI 应该再显示一个元素，但它没有。
@shob 是的，它不显示添加的项目。
是的，这只是示例代码，我只是改变了问题。 Tks

标签： javascript arrays vue.js vue-component vue-reactivity

【解决方案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>

【讨论】：