ArticleController
public function index()
{
$locale = Lang::locale();
// $locale = Lang::getLocale();
$articles = Article::withTranslations($locale)->get();
return $articles;
}
resources/assets/js/pages/articles/Index.vue
<template>
<div>
<div v-for="article in articles" :key="article.articles">
<div v-for="translation in article.translations">
<h4>{{ translation.title }}</h4>
{{ translation.subtitle }}
{{ translation.content }}
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
layout: 'basic',
data: function () {
return {
articles: []
}
},
mounted() {
var app = this;
axios.get('/api/articles')
.then(response => {
// JSON responses are automatically parsed.
this.articles = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
This code snippet is used to display articles based on the detected language in Vue. However, there seems to be an issue when switching languages - the article does not automatically translate. A manual page reload is required for the new language to take effect. How can we implement a solution in Vue to change the language without refreshing the entire page?