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

Posted 2023-02-22

【中文标题】从数据库中删除后，Vue.js $remove 不删除元素

【英文标题】：Vue.js $remove not removing element after deleted from database

【发布时间】：2016-07-07 22:37:24

【问题描述】：

我正在使用 Laravel 并尝试学习 Vue.js。我有一个正常工作的删除请求并从数据库中删除对象。问题是成功删除后它没有从 DOM 中删除。我正在使用$remove 方法并将完整的对象传递给它，所以我知道我遗漏了一些东西。

作为旁注，我有一个main.js 作为入口点，PersonTable.vue 作为一个组件。 PersonTable.vue 保存该模板的模板和脚本。

这是我的 Laravel 视图：

<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>
                    <tr v-for="person in list">
                        <td>person.first_name </td>
                        <td>person.last_name </td>
                        <td>person.email </td>
                        <td>person.gender </td>
                        <td><span @click="deletePerson(person)">X</span>
                    </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</template>

<script>
export default 

    template: '#persons-template',

    props: ['list'],

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

    ,

    created: function() 
        this.persons = JSON.parse(this.list);
    

;
</script>

还有我的main.js 入口点：

var Vue = require('vue');

Vue.use(require('vue-resource'));

var Token = document.querySelector('meta[name="_token"]').getAttribute('content');

Vue.http.headers.common['X-CSRF-TOKEN'] = Token;

import PersonTable from './components/PersonTable.vue';

new Vue(


    el: '#app',

    components:  PersonTable ,

)

【问题讨论】：

你在完成删除请求后更新 Vue.data 吗？

尝试处理你的 post 请求中的错误响应，看看你得到了什么，如果你得到一个错误，那么你删除数据的代码部分永远不会执行

@DanWhite 没有。至少我没有明确更新它。不知道该怎么做。

@YerkoPalma 我在this.persons.$remove(person) 之后添加了console.log(person)，console 显示了被点击的人的对象。

您应该删除组件中创建的方法，我认为这是导致问题的原因。为什么需要这条线？告诉我我是否正确，我会将其发布为答案...但我认为就是这样：/

【参考方案1】：

我认为你需要将this绑定到响应函数：

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 没有正确绑定响应功能？

【讨论】：

我试过了，还是不行。 :( 在查看 Vue 开发工具时，当我单击删除时，对象并没有被删除。现在，一旦我刷新，它就会被删除，因为它实际上是从数据库中删除的。

嗯。如果您使用track-by="index" 或完全删除该参数，此问题是否仍然存在？

好吧..我错了。它确实从数组中删除。视图组件未更新。我在想它会在开发工具中“活”，但事实并非如此。我删除了track-by="id"，它仍然在做同样的事情。有没有办法更新视图？我在想我读到没有必要这样做。如果是这样，那为什么这不起作用？

这给了我一个Uncaught SyntaxError: Unexpected token u 的错误。让我觉得 JSON 没有被正确解析之类的。

您是否将道具更新为personJson？意外令牌 u 通常意味着您的 JSON 解析了 undefined 的内容。应该是<person-table person-json=" $persons ">

【参考方案2】：

我认为你需要在你创建的方法中使用this.$set，如果你不这样做，我担心 Vue 会失去响应性。

在您的created 方法中，您可以尝试以下操作吗：

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));
    

;

【讨论】：

我试过了，但它不起作用。它正在做同样的事情。当我console.log(response) 时，我得到一个带有200 的响应对象，并且该人实际上已从数据库中删除，但该行并未从表中删除。什么给了？？？

【参考方案3】：

终于明白了。我需要将 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>

感谢大家的贡献。由于修复此错误需要多长时间，我几乎放弃了 Vue。

【讨论】：

我可以问一下为什么在我们一起解决我的问题后你选择接受你自己的答案？

@Jeff 虽然您的回答非常有帮助（我确实赞成），但它并不是完整的答案。在您回答后，我仍然需要进行一些更改。如果它是解决方案，那么我当然会将其标记为答案。相信我，即使我选择了自己的答案，我也因为赏金而失去了 50 分，所以除了向人们指出正确的解决方案外，我没有任何收获。有意义吗？

@Jeff 哇！您是否因为我没有选择您的答案而投了反对票？

我与您一起工作了几天，我的说明与您刚刚发布的代码非常精确。我在 cmets 中的说明和我们的讨论就是这个确切的代码。是的，我对您的回答持反对意见。我的答案代码和你的唯一区别是你选择使用list 而不是personJson

太搞笑了。我会将您的答案标记为正确，以便您对已回答问题感到满意。只知道这不是完整的解决方案。您从未特别提到要更新刀片文件属性。此外，您不能使用personJson，因为在渲染刀片文件时，将道具放入小写以生成personjson，这会产生错误。同样，不是解决方案。我发布的是我所说的问题的完整解决方案。就像我说的，我会标记你的答案，这样你才能开心。