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

您可以像这样直接在term上使用find()：

this.postFavourite

Here is的另一种实现方法也可能对您有帮助。

[编辑]

为了使用this.postFavourite.find(pf => pf.user_id == this.userId);，变量必须是一个数组，如果不使用find()来传递引起错误的prop，则this.postFavourite将作为字符串发送。

要将数组或对象传递给组件，您必须使用v-bind告诉Vue，它是JavaScript表达式而不是字符串。更多信息in the documentation

v-bind

Answer 2

仅从您提供的代码来看，没有问题。但是，不需要lodash即可解决此问题。

使用ES2015箭头功能

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

将在数组中找到正确的项目

您可以详细了解此功能in the mdn webdocs

Answer 3

我放弃了lodash并找到了，只是在chrome控制台中弄乱了数据，以找出如何检查所需的值。

然后我建立了一个循环来检查该值。如果找到它，就会像打开心脏一样跳动，而不会离开它。

这不是解决此问题的最佳方法，但我很高兴我有了第一个真正的vue组件。

>>> import sqlite3

>>> db = sqlite3.connect('C:\\Users\\userRock\\Desktop\\gen_profile.sqlite')
>>> cur = db.cursor()

>>> cur.execute (''' CREATE TABLE user (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT) ''')
<sqlite3.Cursor object at 0x002E0EE0>
>>> db.commit()

>>> cur.execute (''' INSERT INTO user(name) VALUES ('John'),('James') ''')
<sqlite3.Cursor object at 0x002E0EE0>
>>> db.commit()

>>> cur.execute (''' SELECT name FROM user ORDER BY RANDOM() LIMIT 1 ''')
<sqlite3.Cursor object at 0x002E0EE0>

>>> text = cur.fetchone()
>>> print (text)
('James',)
>>>

我在哪里传递道具。

<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>

感谢所有试图帮助我的人。

Find a matching value in Vue component

3 个答案: