如何在切换语言时更新Nuxt i18n中的数组对象值

你当前的问题核心是：提交时把已翻译完成的静态文本存入了validations数组，切换语言时这些文本不会自动更新。要解决这个问题，关键是存储翻译的key而非最终渲染的文本，再通过动态方式解析翻译内容。

下面提供两种可行方案：

方案1：模板中直接动态翻译 #

修改组件逻辑，提交时仅存入翻译key，在模板里直接调用$t方法解析：

<!-- Template -->
<div v-for="(validation, index) in validations" :key="index">
    <v-alert type="danger">{{ $t(validation.messageKey) }}</v-alert>
</div>

<!-- Component -->
export default {
    data() {
        return {
            validations: []
        }
    },
    methods: {
        submit() {
            // 存入翻译key，而非已翻译好的文本
            this.validations.push({ 
                part: '表单字段', 
                messageKey: 'error.required' 
            });
            this.validations.push({ 
                part: '必填项', 
                messageKey: 'error.mandatory' 
            });
        }
    }
}

切换语言时，模板会自动重新执行$t方法，渲染对应语言的提示信息。

方案2：用计算属性处理数组（适合需额外逻辑的场景） #

如果需要对验证数组做过滤、排序等额外处理，可以用计算属性包裹，动态生成带翻译信息的数组：

<!-- Template -->
<div v-for="(validation, index) in translatedValidations" :key="index">
    <v-alert type="danger">{{ validation.message }}</v-alert>
</div>

<!-- Component -->
export default {
    data() {
        return {
            validations: [] // 存储带翻译key的原始数据
        }
    },
    computed: {
        translatedValidations() {
            // 遍历原始数组，动态翻译每个项的messageKey
            return this.validations.map(item => ({
                ...item,
                message: this.$t(item.messageKey)
            }));
        }
    },
    methods: {
        submit() {
            this.validations.push({ 
                part: '表单字段', 
                messageKey: 'error.required' 
            });
            this.validations.push({ 
                part: '必填项', 
                messageKey: 'error.mandatory' 
            });
        }
    }
}

注意事项 #

• 修正了你代码中push的语法错误：push的参数应为完整对象，而非零散的键值对。
• 两种方案的核心逻辑一致：避免存储静态翻译文本，始终保留翻译key，让Nuxt i18n在渲染时动态解析。

内容的提问来源于stack exchange，提问作者Bravo