مشکل در بررسی لایک

- 4 روز پیش
توسط heather آپدیت شد
محسن بستان ( 9525 تجربه )
5 روز پیش

سلام دوستان.
بنده یک کامپوننت دارم که دکمه لایک هستش .
روند کار به این صورته که ابتدا چک میکنه که قبلا کاربر این رو لایک کرده یا نه و اگر لایک کرده باشه آیکون قرمز در غیر این صورت آیکون سیاه رو نشون بده.
و مرحله دوم درخواست برای لایک و یا آن لایک هستش.
مشکل بنده درمورد موضوع اول هستش. در حالت عادی اگر true قرار بدم متغیر رو آیکون قرمز و در غیر این صورت سیاه رو نشون میده اما وقتی که به صورت ajax چک میکنم روند کار متفاوت میشه و فقط آیکون سیاه نشون داده میشه :( .
کد ها هم بصورت زیر هستش :

<template>
    <div>
        <div v-if="isLiked == true" v-on:click="sendLike"><i class="fas fa-heart" style="font-size: 22px;color: red;"></i></div>
        <div v-else v-on:click="sendLike"><i class="far fa-heart" style="font-size: 22px;"></i></div>

    </div>
</template>
<script>
    import axios from 'axios';

    export default {
        props: ['id'],
        name: "LikePost",
        data() {
            return {
                isLiked: null,
                tokenAccess: ''
            }
        },
        methods: {
            checkIsLiked() {
                axios.post('/api/checkIsLiked', {id: this.id}, {headers: {Authorization: "Bearer " + this.tokenAccess}}).then(res => {
                    this.isLiked = res.data.data;
                    if (res.data.data) return true; else return false;
                }).catch(e => {
                    console.log(e);
                });
            },
            getToken() {
                let vm = this;
                const datas = {
                    name: 'token',
                    scopes: []
                };
                axios.post('/oauth/personal-access-tokens', datas)
                    .then(response => {
                        vm.tokenAccess = response.data.accessToken;
                        this.checkIsLiked();
                    });
            },
            sendLike: function () {
                let check = this.checkIsLiked();
                if (!check) this.isLiked = true; else this.isLiked = false;
                console.log('cc');
            }
        },
        mounted() {
            this.getToken();
        },
    }
</script>
بهترین پاسخ انتخاب شده توسط محسن بستان
علی بیات
5 روز پیش

سلام .
کامپوننت شما میتونه شکل واضح تری هم به خودش بگیره.

برای مثال کامپوننت زیر رو در نظر بگیرید:

<template>
    <span>
        <a href="#" v-if="isFavorited" @click.prevent="unFavorite(post)">
            <i  class="fa fa-heart"></i>
        </a>
        <a href="#" v-else @click.prevent="favorite(post)">
            <i  class="fa fa-heart-o"></i>
        </a>
    </span>
</template>

<script>
    export default {
        props: ['post', 'favorited'],

        data: function() {
            return {
                isFavorited: '',
            }
        },

        mounted() {
            this.isFavorited = this.isFavorite ? true : false;
        },

        computed: {
            isFavorite() {
                return this.favorited;
            },
        },

        methods: {
            favorite(post) {
                axios.post('/favorite/'+post)
                    .then(response => this.isFavorited = true)
                    .catch(response => console.log(response.data));
            },

            unFavorite(post) {
                axios.post('/unfavorite/'+post)
                    .then(response => this.isFavorited = false)
                    .catch(response => console.log(response.data));
            }
        }
    }
</script>

و برای استفاده درون Blade:

@if (Auth::check())
    <div class="panel-footer">
        <favorite
            :post={{ $post->id }}
            :favorited={{ $post->favorited() ? 'true' : 'false' }}
        ></favorite>
    </div>
@endif

و متد favorited درون مدل Post هم بشکل زیر:

use App\Favorite;
use Illuminate\Support\Facades\Auth;

/**
 * Determine whether a post has been liked by a user.
 *
 * @return boolean
 */
public function favorited()
{
    return (bool) Favorite::where('user_id', Auth::id())
                        ->where('post_id', $this->id)
                        ->first();
}

البته تمام این‌ها وقتی کار میکنه که رابطه‌ Favorite بدرستی در مدل User تنظیم شده باشند.

/**
 * Get all of favorite posts for the user.
 */
public function favorites()
{
    return $this->belongsToMany(Post::class, 'favorites', 'user_id', 'post_id')->withTimeStamps();
}

و نهایتا برای استفاده از توابعی که ساختید بشکل زیر عمل میشه:

public function favoritePost(Post $post)
{
    Auth::user()->favorites()->attach($post->id);

    return back();
}

public function unFavoritePost(Post $post)
{
    Auth::user()->favorites()->detach($post->id);

    return back();
}
علی بیات ( 75322 تجربه )
5 روز پیش

سلام .
کامپوننت شما میتونه شکل واضح تری هم به خودش بگیره.

برای مثال کامپوننت زیر رو در نظر بگیرید:

<template>
    <span>
        <a href="#" v-if="isFavorited" @click.prevent="unFavorite(post)">
            <i  class="fa fa-heart"></i>
        </a>
        <a href="#" v-else @click.prevent="favorite(post)">
            <i  class="fa fa-heart-o"></i>
        </a>
    </span>
</template>

<script>
    export default {
        props: ['post', 'favorited'],

        data: function() {
            return {
                isFavorited: '',
            }
        },

        mounted() {
            this.isFavorited = this.isFavorite ? true : false;
        },

        computed: {
            isFavorite() {
                return this.favorited;
            },
        },

        methods: {
            favorite(post) {
                axios.post('/favorite/'+post)
                    .then(response => this.isFavorited = true)
                    .catch(response => console.log(response.data));
            },

            unFavorite(post) {
                axios.post('/unfavorite/'+post)
                    .then(response => this.isFavorited = false)
                    .catch(response => console.log(response.data));
            }
        }
    }
</script>

و برای استفاده درون Blade:

@if (Auth::check())
    <div class="panel-footer">
        <favorite
            :post={{ $post->id }}
            :favorited={{ $post->favorited() ? 'true' : 'false' }}
        ></favorite>
    </div>
@endif

و متد favorited درون مدل Post هم بشکل زیر:

use App\Favorite;
use Illuminate\Support\Facades\Auth;

/**
 * Determine whether a post has been liked by a user.
 *
 * @return boolean
 */
public function favorited()
{
    return (bool) Favorite::where('user_id', Auth::id())
                        ->where('post_id', $this->id)
                        ->first();
}

البته تمام این‌ها وقتی کار میکنه که رابطه‌ Favorite بدرستی در مدل User تنظیم شده باشند.

/**
 * Get all of favorite posts for the user.
 */
public function favorites()
{
    return $this->belongsToMany(Post::class, 'favorites', 'user_id', 'post_id')->withTimeStamps();
}

و نهایتا برای استفاده از توابعی که ساختید بشکل زیر عمل میشه:

public function favoritePost(Post $post)
{
    Auth::user()->favorites()->attach($post->id);

    return back();
}

public function unFavoritePost(Post $post)
{
    Auth::user()->favorites()->detach($post->id);

    return back();
}
heather ( 2323 تجربه )
5 روز پیش

@ali.bayat
سلام اقای بیات میشه بهم بگین:
چند سالتونه؟
چند ساله برنامه نویسی کار می کنین؟
چه زبان هایی رو کار کردین؟
الان کجا کار می کنین؟
چجوری کار پیدا کردین؟
ممنون :)

علی بیات ( 75322 تجربه )
5 روز پیش

@heather

هر چند به بحث این تاپیک مربوط نمیشه اما، من خیلی ساله بصورت غیر متمرکز با برنامه‌نویسی درگیر هستم.
با زبان‌های اسکریپتینگ (mSL, Tcl) شروع کردم; برنامه‌نویسی سیستم رو یاد گرفتم و بعدش (اوایل انتشار نسخه ۵.۱ PHP) به سمت وب گرایش پیدا کردم.
سایر موارد رو هم میتونید در پروفایل لینکدین من مشاهده کنید.

heather ( 2323 تجربه )
4 روز پیش

@ali.bayat
خیلی ممنون از شما

برای ارسال پاسخ باید وارد سایت شوید