相关疑难解决方法(0)

我是vue.js(2)的新手,我目前正在开发一个简单的事件应用程序.我已设法添加事件但现在我想基于单击按钮删除事件.

HTML

    <div class="list-group">

        <div class="list-group-item" v-for="event in events">
            <h4 class="list-group-item-heading">
                {{ event.name }}
            </h4>

            <h5>
                {{ event.date }}
            </h5>

            <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>

            <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
        </div>

    </div>
</div>

JS(Vue公司)

new Vue ({
    el: '#app',

    data: {
        events: [
            {
                id: 1,
                name: 'Event 1',
                description: 'Just some lorem ipsum',
                date: '2015-09-10'
            },
            {
                id: 2,
                name: 'Event 2',
                description: 'Just another lorem ipsum',
                date: '2015-10-02'
            }
        ],

        event: { name: '', description: '', date: '' …

我想删除我商店中的一个项目。我看到了这个解决方案/sf/answers/4178031511/这似乎是我正在寻找的但我的对象中有另一个“级别”所以我不知道如何从子级。

我的数据结构。

{
    id: 1,
    name: 'My customer one',
    projects: [
        {
            id: 1,
            name: 'name',
            tests: [
                {
                    id: 1,
                    name: 'name test'
                },
                {
                    id: 2,
                    name: 'name test 2'
                }
            ]
        },
        {
            id: 2,
            name: 'other name'
        }
    ]
}

所以我看到如何使用上面的链接删除项目。但是如何删除一行测试？

我在我的 vue 中这样做：

this.$store.commit("deleteTest", this.idProject, e)

这在我的商店里：

deleteTest(state, {data, e}) {
    const allTestsOfProject = state.listProjects.projects.find(p => p.id === data)
    console.log("all", allTestsOfProject)
    const oneTest = allTestsOfProject.studies.find(q => q.id === e)
    console.log("one test", oneTest)
    //state.listProjects.projects.splice(oneTest, …