使用 V-If 和 V-Else 插入数据值？

Question

我的应用程序中有一个段落，用户可以在其中单击一个按钮来翻译它。我插入了通过我的道具 (props.row.text) 和我的数据 (this.data.translatedText) 看到的文本。

数据属性是 empty/null 直到按钮被点击，因此导致我在我的控制台中收到错误“数据为空”。我尝试使用下面的代码解决此问题，但是，这会引发错误，但在单击按钮后不会显示内插文本。

有没有人建议如何最好地构建它，以便在单击按钮后将 {{ props.row.text }} 替换为 {{ this.data.translatedText }}？

Component.vue

<span id="translationButton">
   <translation-button @click="calltranslatedText()" @changeTitle="ChangeT" />
</span>

<div class="ticket-text-container">{{ props.row.text }}</div> 
<div class="ticket-text-container" v-if="calltranslatedText()">{{ this.data.translatedText }}</div> 

 methods: {

    ChangeT(title)
    {
    this.translatedText = title
    },
    calltranslatedText() {
      return true
    },

Answer 1

首先不要在模板中使用this和data，只需指明您在data函数中定义的道具名称。
其次，您可以在 v-if 中使用 translatedText 来显示带有翻译文本的 div。

<div class="ticket-text-container" v-if="translatedText">{{ translatedText }}</div>

如果需要，请不要忘记将 translatedText 设置为空字符串或 null 以再次隐藏此块。

使用 V-If 和 V-Else 插入数据值？

Interpolating Data Values with the use of V-If & V-Else?

vue.js

vue-component

vuejs2