laravel & vue.js

Question

Witam, w celach naukowych napisałem prosty kod do oceniania i obserwowania artykułów, wszystko działa jednak teraz nie wiem jak ogarnąć tego drugą część. Mam taki kod:

<template>
    <div class="menagment-view-article-vjs">
        <i id="followArticle" @click="followArticle" title="Obserwuj" class="icon-star-1 icon-menagment-view-article"></i>
        <i id="likeUp" @click="likeUpArticle" title="Podoba mi się" class="icon-thumbs-up icon-menagment-view-article"></i>
        <i id="likeDown" @click="likeDownArticle" title="Nie podoba mi się" class="icon-thumbs-down icon-menagment-view-article"></i>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                follow: {
                    id_article: '1',
                    type: 'Article',
                },
                likeUp: {
                    id_article: '1',
                    type: 'Article',
                    opinion: '1',
                },
                likeDown: {
                    id_article: '1',
                    type: 'Article',
                    opinion: '0',
                },
                errors: []
            }
        },
        methods: {
            followArticle()
            {
                axios.post('/follows', {
                    id_article: this.follow.id_article,
                    type: this.follow.type,
                })
                    .then(response => {
                        this.reset();
                    });
            },
            likeUpArticle(){
                axios.post('/opinions', {
                    id_article: this.likeUp.id_article,
                    type: this.likeUp.type,
                    opinion: this.likeUp.opinion,
                })
                    .then(response => {
                        this.reset();
                    });
            },
            likeDownArticle(){
                axios.post('/opinions', {
                    id_article: this.likeDown.id_article,
                    type: this.likeDown.type,
                    opinion: this.likeDown.opinion,
                })
                    .then(response => {
                        this.reset();
                    });
            },
            reset()
            {
                this.follow.id_article = '';
                this.follow.type = '';
                this.likeUp.id_article = '';
                this.likeUp.type = '';
                this.likeUp.opinion = '';
                this.likeDown.id_article = '';
                this.likeDown.type = '';
                this.likeDown.opinion = '';
            },
        }
    }
</script>

<style scoped>

</style>

udaje się likować i obserwować artykuły i o to chodziło. Teraz chciałbym aby kiedy już użytkownik kliknie gwiazdkę "obserwuj" i zacznie obserwować dany artykuł ta zmieniła się na pełną oraz po ponownym kliknięciu użytkownik mógł przestać obserwować ten artykuł, podobnie z ocenami. W jaki sposób można to osiągnąć?

Answer 1

W data ustaw sobie jakąś zmienną typu boolean i nadaj jej na początku false. Na sukces tego backend calla przestawiaj ją na true i za pomocą tej zmiennej boolean binduj style, które "wypełnią" ci gwiazdke.

https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

Jeśli chodzi o przestanie obserwowania po ponownym kliknięciu to również możesz użyć tej zmiennej boolean i jeśli jest ustawiona na true, czyli user już kliknął ten element to wysyłasz request pod inny URL, na inny endpoint. Wystarczy zwykły if. (czy tam na ten sam url ale metodę DELETE nie POST, zależnie od twojego API)

Dodatkowo jak robisz jakiś call, który pobiera cały artykuł to backend powinien wystawiać również informacje, że user obserwuje i jeśli obserwuje to również zmienić tą zmienną boolean na true tak aby user bo przeładowaniu miał dalej gwiazdkę "zapełnioną" a także żeby miał opcje usunięcia obserwacji.
 
A btw nie używaj <i> do ikonek bo ten tag z tego co się orientuje to kiedyś był używany do pochylenia tekstu obecnie jest bodajże zdeprecjonowany, na pewno nie ma nic wspólnego z ikonkami. Lepiej dać ikonkę jako span a podobno najlepiej jako svg. Chociaż w tym wypadku gdzie ta ikonka jest konieczna do działania to może lepiej by było użyć img z altem.

PS: ciekawe, że ci to działa bo jak ja ostatnio robiłem Axios -> PHP REST API to musiałem używać 

let params = new URLSearchParams();
params.append('nick', this.loginNickMail);
axios.post('/api/auth/doLogin.php', params, axiosConfig)

bo w innym wypadku w PHP nie widział POSTów :D

Comments

ok, dzięki, zrozumiałem. Jeszcze tylko dwa szybkie pytania:

1.możesz mi na napisać (kawałek kodu) jak dodać  zmienną typu boolean w data i jak ją potem zamienić,

2. jak pobrać właśnie klikanego artykułu, no bo obecnie ustawiłem sobie stałem id ale tak nie może być, można by chyba zrobić coś takiego. W .blade.php dać

<view-article :article="{{$article}}"><view-article>

<span id="followArticle" @click="followArticle(article.id)" title="Obserwuj" class="icon-star-1 icon-menagment-view-article"></span>

tylko jak to id odebrać?

---

Nie wiem jaką konkretnie masz architekturę aplikacji i jaką masz wiedzę na temat vue ale tak:

jak masz strone kategorii (czyli tam gdzie wyświetlasz listę artykułów) wyświetlasz listę artykułów prawdopodobnie używając dyrektywy v-for. Do każdego artykułu w pętli wyświetlasz router link. Binduj sobie tego linka czyli coś takiego:

<router-link :to="{ name: 'article', params: { id: n.id }}">

Przeniesie cię to do URLa, który musisz uchwycić w swoim routingu

{
       path: '/article/:id',
       name: 'article',
       component: article
},

oczywiście wcześniej musisz zaimportować komponent article (nie będę ci tłumaczył tutaj całego vue).

Wtedy w komponencie article w data() możesz "zebrać" z URLa to ID a następnie zrobić backend calla, GETa, który przekaże id:

data() {
    return {
        articles: [],
        errors: [],
        articleId: this.$route.params.id
    }
},
async created() {
    try {
        const response = await axios.get(`/api/article/getOne.php?id=`+this.articleId, axiosConfig);
        this.articles = response.data.records;
        console.log(this.articles);
    } catch (e) {
        this.errors.push(e);
        console.log(this.errors);
    }
}

następnie już po stronie backendu zbierasz sobie ten przekazany id w pliku, który callnąłeś jak masz OOP to np. tak:

if(isset($_GET['id'])) {
    $article = new article($db);
    $article->id = $_GET['id'];
}

chociaż u Ciebie będzie to wyglądało troche inaczej bo używasz laravela i masz tam jakiś routing. Jak już zbierzesz ten id w ten sposób $_GET['id']; to podstawiasz go do zapytania SQL. Użyj PDO żeby uniknąć SQL injection, ale laravel chyba domyślnie używa PDO.

A co do pierwszego pytania to po prostu:

data () {
    return {
        myBool: false 
    }
}

no a później sobie zmieniasz użwając this.myBool tak samo jak w twojej funkcji reset.. To są już bardzo podstawy Vue2JS więc zastanawiam się czy nie łatwiej by Ci było przerobić jakiś porządny tutorial ale co ja tam wiem.. Pozdrawiam:)