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

Question

I have a v-for function that loops through my posts and returns some posts that have a specific value using a filter function. Inside this function I also want to capture some of the post data and push it into a new array inside my data() function. But I'm getting an error saying;

Cannot read property 'opportunityHeadValues' of undefined"

Here's my code:

<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

Simply replace function with arrow functions, so sortPosts will be written in the following syntax:

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

And another point, filter expects boolean to be returned, so it keep all items that return true and filter out all items that return false . I encourage you to check map and sort functions.