Problem with q-editor

Dennis van Beek

Hi,

We have a form with a multi-language q-editor field, but when switching tabs, it does not re-render. I have tried in many different ways, but I always end up with the same problem.
The problem only occurs with the last entered language, the previous languages have no problem.

Also, the problem only occurs with the q-editor, with a q-input it works without problems.

The model for the q-editor is a computed property, because the supported languages are dynamic and it may be empty or partially or completely available.

It’s hard to describe the problem exactly, but I’ll try anyway:
With one text:

enter a text in one language
select a different tab
go back
=> the text is missing

With two texts:

enter text in one language
enter text in a 2nd language
go back to the first language
=> it displays ok
go back to the 2nd language
=> the text of the 1st language remains visible

I have (strongly) simplified the vue-page, to illustrate the problem:

<template>
  <div>
    <q-tabs v-model="selectedLanguage">
      <q-tab v-for="language of langOptions" :key="language.value" :name="language.value" :label="language.label" />
    </q-tabs>
    <q-editor v-model="translation.description" min-height="5rem" :disable="!selectedLanguage" @input="changeIt" />
<!--    <q-input v-model="translation.description" outlined :disable="!selectedLanguage" @input="changeIt" />-->
    <pre>{{serverObject}}</pre>
    <span>Value for {{selectedLanguage}}: {{translation.description}}</span>
  </div>
</template>

<script>
import languages from 'quasar/lang/index.json'

export default {
  data () {
    return {
      langOptions: [],
      selectedLanguage: 'en-us',
      serverObject: {
        translations: []
      }
    }
  },
  computed: {
    translation () {
      return this.serverObject.translations.find(t => t.language === this.selectedLanguage) || { description: '' }
    }
  },
  methods: {
    changeIt () {
      // this can also be a watch
      if (this.selectedLanguage && !this.translation.language) {
        this.translation.language = this.selectedLanguage
        this.serverObject.translations.push(this.translation)
      }
    }
  },
  mounted () {
    this.langOptions = languages.filter(lang => ['en-us', 'nl', 'ro'].includes(lang.isoName)).map(lang => ({
      label: lang.nativeName,
      value: lang.isoName
    }))
  }
}
</script>

The problem probably is a combination of the q-editor and my computed object, but I don’t know what’s the best way to solve it.

Maybe the problem would be solved if I create the complete model on mount, for all supported languages, so there’s nu more need to push new translations to the serverObject on change, but I’d rather not send empty translations to the server, so I have to filter them out againg. And then it seems a bit overkill to do this.