Vuejs this。$ delete会导致嵌套数组的未定义错误?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (394)

版本视图(2.5.2)

undefined当试图删除一个嵌套的对象项时,我得到一个控制台。如果我添加console.log(this.sections),它会将节数组打印到控制台,所以我认为添加sections.items会做到这一点。

...
<li class="m-nav__item" @click="deleteItem(index)">
  <span href="" class="m-nav__link">
    <i class="m-nav__link-icon flaticon-delete-1"></i>
    <span class="m-nav__link-text">
      Delete
    </span>
  </span>
</li>
...

脚本

<script>

    new Vue({
        el: "#main",
        data: {
            sectionName: '',
            sectionDescription: '',
            itemName: '',
            itemPrice: '',
            itemDescription: '',
            selectedSection: null,
            sections: [
                {
                    name: "Salad",
                    description: 'Add chicken to any salad for $3.00',
                    items: [

                        {
                            name: 'Antipasto',
                            description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette',
                            price: '$13.00'
                        }
                    ]
                },
                {
                    name: "Sandwiches",
                    description: 'Add cheese to any salad for $3.00',
                    items: [

                        {
                            name: 'Sandwich 1',
                            description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette',
                            price: '$13.00'
                        }
                    ]
                },
                {
                    name: "Pizzas",
                    description: 'Add Pepperonis to any salad for $3.00',
                    items: [

                        {
                            name: 'Pizza 1',
                            description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette',
                            price: '$13.00'
                        }
                    ]
                }
            ]
        },
        methods: {
            deleteSection: function (index) {
                this.sections.splice(index, 1);
            },
            addNewSection() {
                this.sections.push(
                    {
                        name: this.sections.name,
                        description: this.sections.description,
                        items: []
                    }
                );
                this.sections.name = "";
                this.sections.description = "";
            },
            addNewItem() {
                const section = this.sections.find(s => s.name === this.selectedSection);
                section.items.push({
                    name: this.itemName,
                    price: this.itemPrice,
                    description: this.itemDescription
                });
                this.itemName = "";
                this.itemPrice = "";
                this.itemDescription = ""
            },
            deleteItem: function (index) {
                console.log(this.sections.items);
                this.$delete(this.sections.items, index)
            },
        }
    });
    Vue.config.devtools = true;

</script>
提问于
用户回答回答于

删除是我不经常使用的东西,不在我的工具箱的顶部,特别是对于数组。

this.sections.items.splice(index,1);

扫码关注云+社区

领取腾讯云代金券