No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Problem with q-editor

    Framework
    1
    1
    508
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Dennis van Beek
      Dennis van Beek last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • First post
        Last post