再次观看语言环境并获取文章 - Vuejs

Question

文章控制器

<?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分量

<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');
});

我在前端检测语言环境并在控制器中使用它来获取该语言环境的文章。这只在我每次刷新页面时有效。

我正在使用这个 template，它有一个带有语言切换器的导航栏

如何在不刷新页面的情况下查看语言环境并再次获取文章以刷新 dom。

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>

试过了，成功了！

再次观看语言环境并获取文章 - Vuejs

Watch the locale and fetch articles again - Vuejs

javascript

vue.js

vuejs2

vuex