How to access Vue.js data variables inside a JavaScript filter function

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>

bnabriss · Accepted Answer · 2020-03-26 12:21:30Z

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.

edited Mar 26, 2020 at 12:21

answered Mar 26, 2020 at 12:13

bnabriss

996 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reece Over a year ago

That works thanks. I will look into map and sort, I've seen lots of people using filter this way though I guess its misunderstood. Also I now get this warning [Vue warn]: You may have an infinite update loop in a component render function. This is caused by my first if statement do you think this is an issue?

Collectives™ on Stack Overflow

How to access Vue.js data variables inside a JavaScript filter function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related