Find a matching value in Vue component

Question

I have passed this collection (postFavourite) to my vue component via props.

[{"id":1,"user_id":1,"post_id":2,"created_at":"2018-07-24 09:11:52","updated_at":"2018-07-24 09:11:52"}]

How do I then check if any instance of user_id in the collection is equal to userId which is the current logged in user (also sent via props).

Tried

let pf = _.find(this.postFavourite, { "user_id": this.userId})

Keep getting undefined as the value of the pf variable even though this.userID is equal to 1.

New to JS and Vue.js so any help would be great.

Here is the vue component code.

<template>
    <div>
        <i v-show="this.toggle" @click="onClick" style="color: red" class="fas fa-heart"></i>
        <i v-show="!(this.toggle)" @click="onClick" style="color: white" class="fas fa-heart"></i>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                toggle: 0,
            }
        },

        props: ['postData', 'postFavourite', 'userId'],

        mounted() {
            console.log("Post is :"+ this.postData)
            console.log("User id is: "+ this.userId)
            console.log("Favourite Object is :" +this.postFavourite);

            console.log(this.postFavourite.find(pf => pf.user_id == this.userId));


       },

        methods: {
            onClick() {
                console.log(this.postData);
                this.toggle = this.toggle ? 0 : 1;
            }
        }
    }
</script>

This is how I passed the props to vue

<div id="app">
    <favorite :post-data="'{{ $post->id }}'" :post-favourite="'{{Auth::user()->favourite }}'" :user-id="'{{ $post->user->id }}'"></favorite>
</div>

Answer 1

I gave up on lodash and find and just messed around with the data in the chrome console to work out how to check the value I wanted.

Then I built a loop to check for the value. If it found it toggle the like heart on of not leave it off.

This will not be the best way to solve this problem but I'm just pleased I got my first real vue component working.

<template>
    <div>
        <i v-show="this.toggle" @click="onClick" style="color: red" class="fas fa-heart"></i>
        <i v-show="!(this.toggle)" @click="onClick" style="color: white" class="fas fa-heart"></i>
    </div>
</template>

<script>
    export default {
        props: ['postData', 'postFavourite', 'userId']
        ,

        data() {
            return {
                toggle: 0,
                favs: [],
                id: 0
            }
        },

        mounted () {
            var x
            for(x=0; x < this.postFavourite.length; x++){
                this.favs = this.postFavourite[x];
                if(this.favs['post_id'] == this.postData) {
                    this.toggle = 1
                    this.id = this.favs['id']
                }
            }
        },

        methods: {
            onClick() {
                console.log(this.postData)
                if(this.toggle == 1){
                    axios.post('favourite/delete', {
                        postid: this.id
                    })
                    .then(response => {})
                    .catch(e => {
                        this.errors.push(e)
                    })
                }
                else if(this.toggle == 0){

                    axios.post('favourite', {
                        user: this.userId,
                        post: this.postData
                    })
                    .then(response => {
                        this.id = response.data
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })
                }
                this.toggle = this.toggle ? 0 : 1;
            }
        }
    }
</script>

Where I pass my props.

<favorite :post-data="'{{ $post->id }}'" 
          :post-favourite="{{ Auth::user()->favourite }}"
          :user-id="'{{ Auth::user()->id }}'"></favorite>

Thanks to all that tried to help me.

Answer 2

You can use find() directly on this.postFavourite like this:

this.postFavourite.find(pf => pf.user_id == this.userId);

Here is another way to do it that might help you as well.

[EDIT]

In order to use find() the variable needs to be an array, this.postFavourite is sent as a string if you didn't use v-bind to pass the prop thats what caused the error.

To pass an array or an object to the component you have to use v-bind to tell Vue that it is a JavaScript expression rather than a string. More informations in the documentation

<custom-component v-bind:post-favourite="[...array]"></custom-component>

Answer 3

From just the code you provided, I see no issue. However lodash is not required for this problem.

Using ES2015 arrow functions

let pf = this.postFavourite.find(item => item.user_id === this.userId);

Will find the correct item in your array

You can read more about this function in the mdn webdocs