سلام دوستان.
بنده یک کامپوننت دارم که دکمه لایک هستش .
روند کار به این صورته که ابتدا چک میکنه که قبلا کاربر این رو لایک کرده یا نه و اگر لایک کرده باشه آیکون قرمز در غیر این صورت آیکون سیاه رو نشون بده.
و مرحله دوم درخواست برای لایک و یا آن لایک هستش.
مشکل بنده درمورد موضوع اول هستش. در حالت عادی اگر 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>
سلام .
کامپوننت شما میتونه شکل واضح تری هم به خودش بگیره.
برای مثال کامپوننت زیر رو در نظر بگیرید:
<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();
}
@ali.bayat
سلام اقای بیات میشه بهم بگین:
چند سالتونه؟
چند ساله برنامه نویسی کار می کنین؟
چه زبان هایی رو کار کردین؟
الان کجا کار می کنین؟
چجوری کار پیدا کردین؟
ممنون :)
هر چند به بحث این تاپیک مربوط نمیشه اما، من خیلی ساله بصورت غیر متمرکز با برنامهنویسی درگیر هستم.
با زبانهای اسکریپتینگ (mSL, Tcl) شروع کردم; برنامهنویسی سیستم رو یاد گرفتم و بعدش (اوایل انتشار نسخه ۵.۱ PHP) به سمت وب گرایش پیدا کردم.
سایر موارد رو هم میتونید در پروفایل لینکدین من مشاهده کنید.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟