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

Posted 2023-02-22

【中文标题】查看语言环境并再次获取文章 - Vuejs

【英文标题】：Watch the locale and fetch articles again - Vuejs

【发布时间】：2018-08-27 00:35:35

【问题描述】：

文章控制器

<?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 而无需刷新页面。

【问题讨论】：

把你的文章获取放在methods，然后在mounted调用那个方法。在运行此方法的语言环境中创建 watch。当您没有在 axios 调用中传递语言时，您的服务器如何知道文章应该是哪种语言？

@connexo 我已经更新了代码。你能检查一下，让我知道我犯了什么错误

watch 必须是一个function，其名称必须与它应该观看的属性完全相同。请考虑阅读 Vue.js 文档。

mapGetters( locale: 'lang/locale' ) 应该实现什么？我开始认为您只是尝试了不同的东西，将代码从 a 复制粘贴到 b 到 c，而根本不知道自己在做什么。如果您不花时间深入了解这些概念，这将是行不通的。

这是我使用的模板的作者建议的。它获取 url 中的当前语言环境

【参考方案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>

试过了，效果很好！

【讨论】：

this.articles = 'lang/locale' 我认为没用。

@connexo 是的，你是对的。我在代码中将其注释掉了，不知道它是如何出现在这里的。我将其删除