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

我正在使用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>

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

干净多了

---

请务必阅读有关计算道具以及它们与方法或观察者的区别：

非常感谢您的回答Ignas！谢谢你的提示。事实上，这解释了为什么当“navigator.language”发生变化时，我无法让文本发生变化：计算属性只有在其某些反应依赖项发生变化时才会重新计算。这意味着，只要消息没有更改，对ReversedMessageComputed属性的多次访问将立即返回先前计算的结果，而无需再次运行该函数。

methods: {
    textcontent () {
        var parsed = JSON.parse(this.content)
        const content = parsed.find(element => navigator.language == element['lang'])

        return content['text']
    }
}