Question

我有两个组件（RequestList和Request）。父组件通过调用getRequestList()方法将从服务器获取的对象数组列为其子组件作为props。

从子组件中，可以通过调用作为props发送的父组件的方法deleteRequest(request_id)来删除对象。在父组件方法中，它通过向服务器发送删除请求来删除对象。如果成功，则调用相同的方法来获取请求列表getRequestList()。

我面临的问题是，在子组件中，还有另一种方法可以对请求VoteRequest()进行投票。如果投票成功，它将更新请求组件的投票状态，或者如果失败，则会显示错误。

现在假设在一个Request组件（子组件）中已经存在错误，例如，第一个请求对象。我删除了该请求，并更新了请求列表。然后由于某种原因我不知道为什么，已删除组件的错误仍然存在于其下一个Request组件中。我在这里做错了什么？

父组件（RequestList.vue）：

template
        <ul id="request_list" v-if="request_list_data.length > 0">
            <li v-for="request in request_list_data">
                <request :request_id="request.id"
                         :deleteRequest="deleteRequest"
                         :updateVotes="updateRequestVotes">
                </request>
            </li>
            <p class="error" style="margin-top: 20px;" v-show="request_error !== ''">{{request_error}}</p>
        </ul>

script
    export default {
        data: function () {
            return {
                request_list_data: [],
            }
        },
        methods: {
            getRequestList() {
                const url = this.$store.state.website + '/api/activities/-requests/?ordering=-id';
                this.$http.get(url)
                    .then(function (response) {
                        this.request_list_data = Object.assign([], response.data);
                    })
            },
            deleteRequest(request_id){
                const url = this.$store.state.website + '/api/activities/-requests/' + request_id + '/';
                this.$http.delete(url)
                    .then(function (response) {
                        this.getRequestList();
                    })
            }
        },
        created: function () {
            this.getRequestList();
        }
    }

子组件（Request.vue）：

template
        <div class="request">
            <div class="vote-action" @click="VoteRequest('down')">&#x25BC;</div>
            </div>
            <div class="_data">
                <div class="request_error" v-show="vote_error !== ''">
                    <p class="error">{{vote_error}}</p>
                </div>
                <button v-show="selfrequest" class="deleterequest_btn" @click="deleterequest()">Delete your request</button>
            </div>
        </div>

script
    export default {
        name: 'request_wrapper',
        props: {
            request_id: {
                type: Number,
            },
            updateVotes: {
                type: Function
            },
            deleteRequest: {
                type: Function
            }
        },
        data: function () {
            return {
                vote_error: ''
            }
        },
        methods: {
            VoteRequest(vote_type) {
                this.vote_error = '';
                if (this.$store.state.user_logged_in) {
                    if (vote_type === 'up') {
                        const data = {
                            'request': this.request_id,
                            'vote_type': true
                        };
                        this.PostVote(data);
                    }
                    else if (vote_type === 'down') {
                        const data = {
                            'request': this.request_id,
                            'vote_type': false
                        };
                        this.PostVote(data);
                    }
            },
            PostVote(data) {
                const url = this.$store.state.website + '/api/activities/-request-votes/none/voterequest/';
                this.$http.post(url, data)
                    .then(function (response) {
                        console.log(response.data);
                        this.updateVotes(this.request_id, response.data.votes);
                    })
            },
            deleterequest() {
                this.deleteRequest(this.request_id);
            }
        }
    }

Answer 1

向key循环内的元素添加唯一v-for始终是一种很好的做法。

使用唯一key s可以避免从使用v-for呈现的数组中删除项目时出现奇怪的行为。它有助于Vue决定渲染新数据或显示缓存的数据：https://vuejs.org/v2/guide/list.html#key

在循环组件时，需要使用key从Vue 2.2开始：https://vuejs.org/v2/guide/list.html#Components-and-v-for

子组件的数据在更新时传递给它下一个兄弟组件

1 个答案: