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组件

<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

1 个答案: