Watch the locale and fetch articles again - Vuejs

Question

ArticleController

<?php

namespace App\Http\Controllers\Articles;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\ArticleCategory;
use App\Models\Article;
use App\Models\ArticleTranslation;
use Lang;

class ArticleController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $locale = Lang::locale();
        // $locale =   Lang::getLocale();
        $articles = Article::withTranslations($locale)->get();
        return $articles;
    }

Article.vue component

<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'
import { mapGetters } from 'vuex'
export default {
  layout: 'basic',

  computed: mapGetters({
    locale: 'lang/locale'
  }),

  data: function () {
    return {
        articles: []
    }
  },
  watch: {
    locale: 'lang/locale'
  },
  mounted() {
    console.log(this.locale)
    this.getArticles ()
  },
  methods: {
    getArticles() {
      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>

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('articles', 'Articles\ArticleController');
});

I'm detecting the locale on the frontend and using it in the controller to fetch articles for that locale. This works only when i refresh the page everytime.

I'm using this template which has a navbar with language switcher

How to watch the locale and fetch the articles again in order to refresh the dom without refreshing the page.

Answer 1

<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
  export default {
    layout: 'basic',

    computed: mapGetters({
      locale: 'lang/locale'
    }),

    data: function () {
        return {
            articles: []
        }
    },
    watch: {
      locale: function (newLocale, oldLocale) {
        this.getArticles()
      }
    },
    mounted() {
        console.log(this.locale)
        this.getArticles ()
    },
    methods: {
      getArticles() {
        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>

Tried this and it worked!