vue-18n - как принудительно перезагрузить вычисляемую функцию при смене языка

Question

Я использую 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.log(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>

в ContentController

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>

Answer 1

Вы НЕ ДОЛЖНЫ передавать параметры вычисляемым реквизитам!Они не являются методами, и вы должны вместо этого создать метод:

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']
    }
}

Намного чище!

Пожалуйста, прочитайтео вычисляемых реквизитах и ​​о том, чем они отличаются от методов или наблюдателей: документы