Question

ArticleController

public function index()
    {
        $locale = Lang::locale();
        // $locale =   Lang::getLocale();
        $articles = Article::withTranslations($locale)->get();
        return $articles;
    }

资源/资产/ JS /页/条/ Index.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'

    export default {
        layout: 'basic',

        data: function () {
            return {
                articles: []
            }
        },
        mounted() {
            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>

根据在前端（Vue）检测到的当前语言显示文章。当我用切换器更改语言时，文章不会自动翻译。我必须手动重新加载页面才能以新选择的语言显示文章。如何在不刷新页面的情况下重新加载新语言

Answer 1

我不确定我是否理解得很好，但是......

您想根据用户偏好语言更改文章文本，但是您没有向控制器发送语言参数，并且您没有捕获任何lang参数。
我想你可以做这样的事情

ArticleController

public function index($locale) // you'll need to modify your route or you can use the Request $request, in that case $locale = $request->locale
{
    // $locale = Lang::locale();
    // $locale =   Lang::getLocale();
    $articles = Article::withTranslations($locale)->get();
    return $articles;
}

resources / assets / js / pages / articles / Index.vue

<template>
    <div>
        Select Your Language
        <select v-model="language"> 
            <option @click="changeLang('english')">english</option>
            <option @click="changeLang('spanish')">spanish</option>
            <option @click="changeLang('italian')">italian</option>
        </select>
    </div>
</template>
<script>
    import axios from 'axios'

        export default {
            layout: 'basic',

            data: function () {
                return {
                    articles: [],
                    language: 'english'
                }
            },
            mounted() {
                this.getArticles ()
            },
            methods: {
                changeLang (lang) {
                    // at change set new lang and obtain articles again with the new lang setting
                    this.language = lang
                    this.getArticles ()
                },
                getArticles () {
                    var app = this;
                    axios.get('/api/articles', {locale: this.language}) // Send lang param to a controller
                        .then(response => {
                        // JSON responses are automatically parsed.
                        this.articles = response.data
                        })
                        .catch(e => {
                        this.errors.push(e)
                        })
                }
            }
        }
</script>

我真的希望这个答案可以帮助你

重新加载文章翻译，无需刷新页面 - Vue

1 个答案: