javascript - 如何在 JavaScript 过滤器函数中访问 Vue.js 数据变量

Question

我有一个 v-for 函数，它循环遍历我的帖子并使用过滤器函数返回一些具有特定值的帖子。在这个函数中，我还想捕获一些发布数据并将其推送到我的 data() 函数内的新数组中。但我收到一条错误消息:

Cannot read property 'opportunityHeadValues' of undefined"

这是我的代码:

<template>
    <div id="summary_section">
        <h2>Summary</h2>

        <div id="summary_board">
            <div class="column">
                <div class="head">
                    <p class="column_title">Opportunities</p>
                    <p class="column_percentage">0%</p>
                    <hr>
                    <p class="calculated_total">£0</p>
                    <p class="raw_total">£000000</p>
                </div>

                <div class="body">
                    <div class="post"
                        v-for="post in sortPosts('Opportunity')"
                        v-bind:key="post._id"
                        v-on:click="toggleUpdateFormVisibility(post)"
                    >
                        <p>{{ post._id }}</p>
                        <p class="company">{{ post.company_name }}</p>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="head">
                    <h3>Prospects</h3>
                </div>

                <div class="body">
                    <div class="post" 
                        v-for="post in sortPosts('Prospects')"
                        v-bind:key="post._id"
                        v-on:click="toggleUpdateFormVisibility(post)"
                    >
                        <p>{{ post._id }}</p>
                        <p class="company">{{ post.company_name }}</p>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="head">
                    <h3>Proposal</h3>
                </div>

                <div class="body">
                    <div class="post" 
                        v-for="post in sortPosts('Proposal')"
                        v-bind:key="post._id"
                        v-on:click="toggleUpdateFormVisibility(post)"
                    >
                        <p>{{ post._id }}</p>
                        <p class="company">{{ post.company_name }}</p>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="head">
                    <h3>Presentation</h3>
                </div>

                <div class="body">
                    <div class="post" 
                        v-for="post in sortPosts('Presentation')"
                        v-bind:key="post._id"
                        v-on:click="toggleUpdateFormVisibility(post)"
                    >
                        <p>{{ post._id }}</p>
                        <p class="company">{{ post.company_name }}</p>
                    </div>
                </div>
            </div>
        </div>

        <SubmitForm v-if="submitFormVisibility" v-on:formSubmitted="newFormSubmission" v-on:closeModal="toggleSubmitFormVisibility"/>
        <UpdateForm 
            v-if="updateFormVisibility" 
            v-on:formSubmitted="updateFormSubmission" 
            v-on:closeModal="toggleUpdateFormVisibility" 
            v-on:opportunityDeleted="updateFormSubmission" 
            v-bind:postData="post"
        />
    </div>
</template>

<script>
    import SubmitForm from './SubmitForm.vue';
    import UpdateForm from './UpdateForm.vue';
    import axios from 'axios';

    export default {
        components: {
            SubmitForm,
            UpdateForm
        },
        data() {
            return{
                posts: [],
                post: [],
                submitFormVisibility: false,
                updateFormVisibility: false,
                opportunityHeadValues: []
            };
        },
        created() {
            this.getPostData();
        },
        methods: {
            getPostData() {
                axios.get('http://localhost:5000/')
                    .then(res => {
                        const data = res.data;
                        this.posts = data;
                    })
                    .catch(error => console.log(error));
            },
            toggleSubmitFormVisibility(){
                this.submitFormVisibility = !this.submitFormVisibility;
            },
            toggleUpdateFormVisibility(post){
                if( post != undefined ) {
                    this.post = post;
                }
                this.updateFormVisibility = !this.updateFormVisibility;
            },
            newFormSubmission() {
                this.getPostData();
                this.toggleSubmitFormVisibility();
            },
            updateFormSubmission() {
                this.getPostData();
                this.toggleUpdateFormVisibility();
            },
            sortPosts(columnName) {
                return this.posts.filter( function(post) {
                    if( columnName == 'Opportunity') {
                        this.opportunityHeadValues.push({annual_value: post.annual_value});
                    }

                    if(post.pipeline_stage == columnName) {
                        return post;
                    }
                });
            }
        }
    }
</script>

Answer 1

只需将 function 替换为箭头函数，因此 sortPosts 将按以下语法编写:

            sortPosts(columnName) {
                return this.posts.filter((post) => {
                    if( columnName == 'Opportunity') {
                        this.opportunityHeadValues.push({annual_value: post.annual_value});
                    }

                    if(post.pipeline_stage == columnName) {
                        return post;
                    }
                });
            }

还有一点，filter 期望返回 boolean，因此它会保留所有返回 true 的项目，并过滤掉所有返回的项目假。 我鼓励您检查 map 和 sort 函数。