Я использую vue-i18n, но у меня также есть некоторый контент, который хранится в базе данных. Я хотел бы, чтобы мой текст обновлялся, когда пользователь меняет язык. Я использую laravel и vuejs2. Заранее спасибо, я еще не очень хорошо знаком с vuejs. Я надеюсь, что это достаточно ясно.
в ContenuComponent.vue
<template>
<div>
{{$i18n.locale}} <== this changes well
<div v-html = "textcontent"></div>
<div v-html = "textcontent($i18n.locale)"></div> <== this won't work, I am wondering how to put params here (more like a general quetsion)
</div>
</template>
<script>
export default {
name:'contenu',
props: {
content: {
type: String,
default: '<div></div>'
}
},
computed: {
textcontent: function () {
console.info(navigator.language); <== this gives me the language as well, so i could use it if I can make it reload
var parsed = JSON.parse(this.content);
parsed.forEach(element => {
if (navigator.language == element['lang']){
return element['text'];
}
});
}
}
}
</script>
в Контентконтроллере
public function getcontent(){
$content = DB::connection('mysql')->select( DB::connection('mysql')->raw("
SELECT text, lang from content
"));
return view('myvue', ['content' => json_encode($content)]);
}
в content.blade.php
<div id = "app">
<contenu content = "{{ $content }}"></contenu>
</div>
Вы НЕ ДОЛЖНЫ передавать параметры вычисляемым свойствам! Это не методы, и вместо этого вы должны создать метод:
methods: {
textcontent () {
var parsed = JSON.parse(this.content)
parsed.forEach(element => {
if (navigator.language == element['lang']){
return element['text']
}
})
}
}
Также вы должны учитывать синтаксис ES6:
methods: {
textcontent () {
var parsed = JSON.parse(this.content)
const content = parsed.find(element => navigator.language == element['lang'])
return content['text']
}
}
Гораздо чище!
Обязательно прочтите о вычисляемых свойствах и о том, чем они отличаются от методов или наблюдателей: документы
Большое спасибо за ответ, Игнас! И спасибо за советы. Действительно, это объясняет, почему я не мог изменить текст при изменении "navigator.language": вычисляемое свойство будет переоцениваться только тогда, когда некоторые из его реактивных зависимостей изменились. Это означает, что пока сообщение не изменилось, множественный доступ к вычисляемому свойству reversedMessage немедленно вернет ранее вычисленный результат без необходимости повторного запуска функции.