Problem with q-editor



  • 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.


Log in to reply