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

I have a paragraph in my app, in which the user can translate it at the click of a button. I interpolate the text seen via my props (props.row.text) and my data (this.data.translatedText).

The data property is empty/null until the button is cliked, which therefore causes me to receive the error "data is null" in my Console. I attempt to fix this with the code below, however, this throws me error but does not display the interpolated text after the button click.

Does anyone have a suggestion for how best to structure this, so that the {{ props.row.text }} is replaced by {{ this.data.translatedText }} after the button is clicked?

Component.vue

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

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

 methods: {

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

CodePudding user response：

Firstly don't use this and data in the template just indicate a prop name you defined in data function.
Secondly, you can just use translatedText in v-if to show div with the translated text.

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

Don't forget to set translatedText to an empty string or null to hide this block again if needed.