lundi 8 avril 2019

vue-18n - how to force reload in computed function when changing language

I am using vue-i18n but I also have some content which is stored in database. I would like my text to be updated when the user changes the language. I am using laravel and vuejs2. Thanks in advance, I am not super familiar with vuejs yet. I hope it's clear enough.

in ContenuComponent.vue

<template>
    <div>
                                              <== 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>

in 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)]);
    }

in content.blade.php

<div id="app">
    <contenu content=""></contenu>
</div>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire