Javascript Vue.js$remove从数据库中删除后不删除元素

我正在使用Laravel并尝试学习Vue.js。我有一个正常工作的删除请求，正在从数据库中删除该对象。问题是，成功删除后，它不会从DOM中删除。我正在使用

$remove

方法并将完整对象传递给它，因此我知道我遗漏了一些东西

作为旁注，我将

main.js

作为入口点，将

PersonTable.vue

作为组件。

PersonTable.vue

保存该模板的模板和脚本

以下是我的Laravel视图：

<div id="app">
    <person-table list="{{ $persons }}">

    </person-table>
</div>

---

我认为您需要将此绑定到响应函数：

function(response) {
    this.persons.$remove(person);
}.bind(this)

这样，当您执行

this.persons

时，您仍然在引用Vue组件

编辑：可以试试-

props:['personJson'],
data:function(){
  return {
    persons:[]
  }
},
ready:function(){
  this.persons = JSON.parse(this.personJson)
}

---

考虑到可能由于

persons

最初是一个字符串，Vue没有正确绑定反应性功能？

我认为您需要在创建的方法中使用

this.$set

，如果不这样做，恐怕Vue会失去反应性

在您创建的

方法中，您是否可以尝试以下操作：

export default {

    template: '#persons-template',

    props: ['persons'],

    methods: {
        deletePerson: function(person) {
            var self = this;
            this.$http.delete('/person/' + person).then(
                function(response) {
                    self.persons.$remove(person);
                }
            );
        }

    },

    created: function() {
        this.$set('persons',JSON.parse(this.persons));
    }

};

我终于明白了。我需要将JSON数据传递给组件的
data
属性。这是代码

在刀片文件中：

<div id="app">
    <person-table list="{{ $persons }}">

    </person-table>
</div>



在我的PersonTable.vue文件中：

<template id="persons-template">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1>Persons List</h1>
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td>Email</td>
                        <td>Gender</td>
                    </tr>
                    </thead>
                    <tbody>
                    // Notice how I am using persons here instead of list
                    <tr v-for="person in persons">
                        <td>{{person.first_name }}</td>
                        <td>{{person.last_name }}</td>
                        <td>{{person.email }}</td>
                        <td>{{person.gender }}</td>
                        <td><span class="delete person" @click="deletePerson(person)"><i class="fa fa-close"></i></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {

        template: '#persons-template',

        props: ['list'],

        data: function() {
            return {
                persons: []
            }
        },

        methods: {
            deletePerson: function(person) {
                this.$http.delete('/person/' + person.id).then(
                    function(response) {
                        this.persons.$remove(person);
                     }
                );
            },
        },

        created: function() {
            // Pushing the data to the data property so it's reactive
            this.persons = JSON.parse(this.list);
        },

    };
</script>


人员名单
名字
姓
电子邮件
性别
//注意我是如何在这里使用persons而不是list
{{person.first_name}
{{person.last_name}
{{person.email}
{{person.gender}
导出默认值{
模板：“#人员模板”，
道具：[“列表”]，
数据：函数（）{
返回{
人员：[]
}
},
方法：{
deletePerson：函数（person）{
这是.http.delete（'/person/'+person.id）。然后(
功能（响应）{
此。人员。$移除（人员）；
}
);
},
},
已创建：函数（）{
//将数据推送到数据属性，使其处于被动状态
this.persons=JSON.parse（this.list）；
},
};

感谢大家的贡献。由于修复此错误花费了很长时间，我几乎放弃了Vue。
完成删除请求后是否更新Vue.data？如果收到错误，请尝试处理post请求中的错误响应，以查看您得到了什么，那么代码中删除数据的部分永远不会被删除executed@DanWhite不，至少我没有明确地更新它。我不知道该怎么做。@Yerkoplma我在
this.persons.$remove（person）
之后添加了一个
console.log（person）
，而
console
显示了被点击的人的对象。您应该删除组件中创建的方法，我认为这就是导致问题的原因。你为什么需要这条线？告诉我，如果我是正确的，我会张贴它作为答案。。。但我想就是这样了：/我试过了，但仍然不起作用（在Vue开发工具中查看时，单击“删除”时，该对象没有被删除。现在，我刷新后，该对象将被删除，因为它实际上正在从数据库中删除。hmm。如果使用
track by=“index”，该问题是否会持续存在
或者如果完全删除该参数？好的..我错了。它确实从数组中删除了。视图组件没有更新。我原以为它在开发工具中是“活动”的，但事实并非如此。我删除了
track by=“id”
但它仍然在做同样的事情。有没有办法更新视图？我想我读到没有必要这样做。如果是这样的话，那么为什么这不起作用？这给了我一个错误
未捕获的语法错误：意外的标记u
。这让我觉得JSON没有被正确解析或其他什么。你更新了吗e道具是
personJson
？意外标记
u
通常意味着你用JSON解析了一些
未定义的
。应该是
我试过了，但它不起作用。它也在做同样的事情。当我
控制台.log（响应）时
，我得到了一个带有
200
的响应对象，这个人实际上已从数据库中删除，但该行并未从表中删除。这有什么用呢？？？我可以问一下，在我们一起研究我的答案后，你为什么选择接受你自己的答案吗？@Jeff，而你的答案非常有用（我也投了赞成票）这不是完整的答案。在您的答案之后，我仍然需要做一些更改。如果这是解决方案，那么我肯定会将其标记为答案。相信我，尽管我选择了自己的答案，但由于悬赏，我损失了50分，因此我除了向人们指出正确的解决方案之外，没有其他收获。有意义吗@杰夫：哇！我没有选择你的答案，你给我投了反对票吗？我和你一起工作了几天，我的指示与你刚刚发布的代码非常吻合。我在评论和我们的讨论中的指示就是这个代码。是的，我对你的答案投了反对票。我的答案代码和你的答案代码唯一的区别是你选择使用
list
而不是
personJson
，这很好笑。我会将你的答案标记为正确，这样你就可以对回答问题感到满意。只需知道这不是问题的答案
<div id="app">
    <person-table list="{{ $persons }}">

    </person-table>
</div>

<template id="persons-template">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1>Persons List</h1>
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td>Email</td>
                        <td>Gender</td>
                    </tr>
                    </thead>
                    <tbody>
                    // Notice how I am using persons here instead of list
                    <tr v-for="person in persons">
                        <td>{{person.first_name }}</td>
                        <td>{{person.last_name }}</td>
                        <td>{{person.email }}</td>
                        <td>{{person.gender }}</td>
                        <td><span class="delete person" @click="deletePerson(person)"><i class="fa fa-close"></i></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {

        template: '#persons-template',

        props: ['list'],

        data: function() {
            return {
                persons: []
            }
        },

        methods: {
            deletePerson: function(person) {
                this.$http.delete('/person/' + person.id).then(
                    function(response) {
                        this.persons.$remove(person);
                     }
                );
            },
        },

        created: function() {
            // Pushing the data to the data property so it's reactive
            this.persons = JSON.parse(this.list);
        },

    };
</script>