Vue.js 3中根据语言环境动态调整内边距的问题

问题根源 #

• 使用computed时样式不生效：你返回的是ref对象本身，而非它的.value值。:style需要的是样式字符串/对象，直接传ref对象会被当作普通对象处理，导致样式无法识别。
• 改用method后切换语言不更新：method不会自动追踪依赖变化，只有手动调用才会执行，所以语言切换时不会重新计算样式。

修复代码示例 #

<template>
  <div
    class="input-group modal-check-show show-modal"
    :style="paddingLeft"
  >
    ...
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 固定样式无需用ref，直接存字符串即可
const EnPaddingLeft = 'padding-left: 27%;'
const DePaddingLeft = 'padding-left: 28%;'
const SrPaddingLeft = 'padding-right: 33% !important;'

const paddingLeft = computed(() => {
  switch (Tr.currentLocale) {
    case 'de':
      return DePaddingLeft
    case 'sr':
      return SrPaddingLeft
    case 'en':
    default:
      return EnPaddingLeft
  }
})
</script>

关键注意点 #

1. 确保Tr.currentLocale是响应式的：如果它是普通变量，要改成ref或reactive声明的响应式变量，这样computed才能感知到它的变化并重新计算样式。
2. 简化样式存储：固定的样式值无需用ref包裹，直接用字符串更简洁。
3. 用switch优化逻辑：替代多分支if-else，代码可读性更强。

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