ClassController
<?php
namespace App\Http\Controllers\Classes;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\ClassCategory;
use App\Models\Article;
use App\Models\ArticleDescription;
use Lang;
class ClassController extends Controller
{
/**
* Display a listing of the resources.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$language = Lang::locale();
// $language = Lang::getLocale();
$articles = Article::withDescriptions($language)->get();
return $articles;
}
Class.vue component
<template>
<div>
<div v-for="article in articles" :key="article.articles">
<div v-for="description in article.descriptions">
<h4>{{ description.title }}</h4>
{{ description.subtitle }}
{{ description.content }}
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
export default {
layout: 'basic',
computed: mapGetters({
language: 'lang/language'
}),
data: function () {
return {
articles: []
}
},
watch: {
language: 'lang/language'
},
mounted() {
console.log(this.language)
this.getClasses ()
},
methods: {
getClasses() {
var app = this;
axios.get('/api/classes')
.then(response => {
// JSON responses are automatically parsed.
this.articles = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
}
</script>
api.php
Route::group(['middleware' => 'guest:api'], function () {
Route::post('login', 'Auth\LoginController@login');
Route::post('register', 'Auth\RegisterController@register');
Route::post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail');
Route::post('password/reset', 'Auth\ResetPasswordController@reset');
Route::resource('classes', 'Classes\ClassController');
});
I'm identifying the language on the front end and utilizing it in the controller to retrieve classes for that specific language. This method only functions when I manually refresh the page.
I am utilizing this theme which comes with a navigation bar featuring a language switcher.
How can I monitor changes in language and reload the classes to update the content dynamically without having to refresh the entire page.