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

干净得多！

请确保阅读有关计算道具及其与方法或观察者的区别：docs

vue-18n-更改语言时如何在计算函数中强制重新加载

1 个答案: