Vue3项目中如何使用Vue-i18n为input按钮设置国际化翻译的value值

嘿，我懂你碰到的这个问题了！你想用Vue-i18n的翻译文本作为提交按钮的value，结果用v-model的时候直接报错了对吧？

其实问题出在v-model的本质上——它是用来做双向数据绑定的，要求绑定的必须是一个可以被赋值的响应式变量（也就是合法的JavaScript成员表达式），但$t('message.hello')只是一个返回翻译字符串的函数调用，没办法被双向绑定，所以才会抛出那个v-model value must be a valid JavaScript member expression的错误。

对于提交按钮这种不需要用户修改值的元素，我们根本没必要用v-model，直接用单向绑定的:value（也就是v-bind:value的简写）就可以完美解决问题：

错误写法（会触发报错）：

<input type="submit" v-model="$t('message.hello')" class="button primary" />

正确写法：

<input type="submit" :value="$t('message.hello')" class="button primary" />

要是你真的有特殊需求，需要这个按钮文本是可修改的（不过提交按钮一般不需要这个操作），那也可以先把翻译后的文本赋值给一个响应式变量，再用v-model绑定这个变量：

<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
// 把翻译文本赋值给响应式变量
const buttonText = ref(t('message.hello'))
</script>

<template>
  <input type="submit" v-model="buttonText" class="button primary" />
</template>

不过对于提交按钮的场景来说，第一种用:value绑定的方法就足够简单直接啦！

备注：内容来源于stack exchange，提问作者user2239318