观看语言环境并再次获取文章 - Vuejs [英] Watch the locale and fetch articles again - Vuejs
问题描述
文章控制器
get();返回 $articles;}Article.vue 组件
<div><div v-for="文章中的文章" :key="article.articles"><div v-for="translation in article.translations"><h4>{{ translation.title }}</h4>{{translation.subtitle}}{{ 翻译内容}}</模板><脚本>从 'axios' 导入 axios从 'vuex' 导入 { mapGetters }导出默认{布局:'基本'，计算:mapGetters({语言环境:'语言/语言环境'}),数据:函数(){返回 {文章:[]}},手表: {语言环境:'语言/语言环境'},安装(){控制台.log(this.locale)this.getArticles()},方法: {获取文章(){var app = this;axios.get('/api/articles').then(响应 => {//JSON 响应被自动解析.this.articles = response.data}).catch(e => {this.errors.push(e)})}}}
api.php
Route::group(['middleware' => 'guest:api'], function () {Route::post('登录', 'Auth\LoginController@login');Route::post('register', 'Auth\RegisterController@register');Route::post('密码/邮箱', 'Auth\ForgotPasswordController@sendResetLinkEmail');Route::post('密码/重置', 'Auth\ResetPasswordController@reset');Route::resource('文章', '文章\文章控制器');});我正在检测前端的语言环境并在控制器中使用它来获取该语言环境的文章.这仅在我每次刷新页面时才有效.
我正在使用这个 模板，它有一个带有语言切换器的导航栏>
如何在不刷新页面的情况下查看语言环境并再次获取文章以刷新dom.
试过了，成功了！
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.
<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!
这篇关于观看语言环境并再次获取文章 - Vuejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
