[Vuejs]-Reload article translation without refreshing page – Vue

by

0👍

✅

I’m not sure if I understand well, but…

You want to change the article text acoording to the user preference language but you are not sending to a controller a language param and you dont capture any lang param.
I think you can do something like this

ArticleController

public function index($locale) // you'll need to modify your route or you can use the Request $request, in that case $locale = $request->locale
{
    // $locale = Lang::locale();
    // $locale =   Lang::getLocale();
    $articles = Article::withTranslations($locale)->get();
    return $articles;
}

resources/assets/js/pages/articles/Index.vue 

<template>
    <div>
        Select Your Language
        <select v-model="language"> 
            <option @click="changeLang('english')">english</option>
            <option @click="changeLang('spanish')">spanish</option>
            <option @click="changeLang('italian')">italian</option>
        </select>
    </div>
</template>
<script>
    import axios from 'axios'

        export default {
            layout: 'basic',

            data: function () {
                return {
                    articles: [],
                    language: 'english'
                }
            },
            mounted() {
                this.getArticles ()
            },
            methods: {
                changeLang (lang) {
                    // at change set new lang and obtain articles again with the new lang setting
                    this.language = lang
                    this.getArticles ()
                },
                getArticles () {
                    var app = this;
                    axios.get('/api/articles', {locale: this.language}) // Send lang param to a controller
                        .then(response => {
                        // JSON responses are automatically parsed.
                        this.articles = response.data
                        })
                        .catch(e => {
                        this.errors.push(e)
                        })
                }
            }
        }
</script>

I really hope that this answer help you

Leave a comment