Vue中使用V-If/V-Else插值切换原文本与翻译文本的问题求助

问题核心原因 #

1. 响应式属性访问错误：Vue选项式API中，data中声明的属性直接通过this.属性名访问，你写的this.data.translatedText是错误写法，这是翻译后内容不展示的主要原因
2. 条件判断逻辑错误：v-if绑定的calltranslatedText()固定返回true，意味着第二个文本容器从页面初始化就会渲染，此时translatedText还未赋值，自然会触发空值报错
3. 状态缺失：没有变量标记翻译按钮是否被点击，无法实现原文和译文的切换逻辑

优化方案 #

不需要写两个重复的文本容器，新增翻译状态标记、修正属性访问逻辑即可，完整代码如下：

模板部分

<span id="translationButton">
   <translation-button @click="handleTranslate" @changeTitle="ChangeT" />
</span>

<div class="ticket-text-container">
  {{ isTranslated ? (translatedText ?? props.row.text) : props.row.text }}
</div>

脚本部分（Vue2选项式写法）

<script>
export default {
  data() {
    return {
      translatedText: '', // 初始赋值为空字符串，避免空值报错
      isTranslated: false // 翻译触发标记
    }
  },
  methods: {
    ChangeT(title) {
      this.translatedText = title
    },
    handleTranslate() {
      // 点击后修改标记，切换为译文展示
      this.isTranslated = true
    }
  }
}
</script>

补充说明 #

• 空值合并运算符??用来做兜底处理，就算翻译接口返回空值，也会默认展示原文，不会出现空白内容
• 如果使用Vue3 setup语法，不需要加this前缀，直接访问声明的响应式变量即可
• 如果你需要实现点击按钮切换原文/译文的效果，把handleTranslate里的逻辑改成this.isTranslated = !this.isTranslated即可

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