Q-tab-panels, post form input values when tab is not visible

[JJ]

Having two tabs. Each tab gots input fields to be posted using a form.
Modify first tab input fields, then modify second tab input fields.
Posting the form, only the second tab fields are posted. The first tab fields are not.
How to post them all?

[metalsadman]

Wrap them in a parent qform or a form, prolly also need use keep-alive.

[JJ]

“Wrap them in a parent qform or a form”, I did it. but doesn’t work
“prolly” ? what you mean?

[metalsadman]

@JJ sry prolly = probably, anyway an example https://codepen.io/metalsadman/pen/OJyoYPB

[JJ]

Many thanks. Will try on asp.net controller and check if values are submitted.

[JJ]

I added keep-alive but it seems does not work in asp.net. Only visible inputs are posted.
Any clue?

[metalsadman]

@JJ did you implement the test() method as well? since you need to traverse all thru the panels in order for them to be available. also check the QForm documentation https://quasar.dev/vue-components/form.

[JJ]

Yes I did. Also your codepen works even if test() methos is not called.
Using Q-Form, does not post to the asp.net controller. while native form posts, but only visible tab inputs are posted.

[JJ]

https://github.com/quasarframework/quasar/issues/7147
They say that unvisible tabs are not rendered into the DOM, so they will never be posted.

[metalsadman]

@JJ you can still post the forms, just don’t rely on native submit with names and what not, you will tie your formdata via model, and override the submit button, like i did in the example and let axios/fetch/whatever http client you use do the posting with your formData. updated the example to show you how to get the data https://codepen.io/metalsadman/pen/OJyoYPB. check your dev console.

[donsherman]

@metalsadman I have the same approach as JJ and I was first glad, to find this post here.
But indeed: it doesn’t work to me, because the unvisible tabs are all undefined then (this.$refs.age == undefined i.e. submitting on name-tab ).
Why is your codepen however working?
Could you pls. explain a bit more in detailed how your travers method is working? (And why this doesn’t seemed to be enough to get ALL other q-input refs defined?)

 discoverTabs() {
      // traverse the tabs to discover its content
      let traversal = this.tabNames.reduce((promiseChain, item) => {
        return promiseChain.then(() => new Promise(resolve => {
              console.log("done with", item)
              resolve()
              this.$refs.tabs.goTo(item)
            })
        )
      }, Promise.resolve())
      
      traversal.then(() => {
        console.log("done")
        this.$refs.tabs.goTo('name')
      })
    }

So is there a chance to check all validations of the q-form in onSubmit?
Or do I really should use q-tab w/o q-tab-panels and define them all with a v-show?

Edit: as remark: I have more than one q-input component per each tab-panel. Is that maybe a cause? And your example of the travers method doesn’t cope this?

[donsherman]

I found the pitfall in my case: forgot to put ‘keep-alive’ into q-tab-panels prop.
Sorry for that.
But nevertheless : it would be rather helpful to understand better what this promises really do.

Edit: to me it seems to be that, promiseChain is only a string - and not a function.
How could this be “then()'able” then?

[metalsadman]

@donsherman it’s in the comments, as to what promises are, read it in the mdn or somewhere. Don’t really need promises in the example, just implement your own logic to traverse all tabs on mounted as to solve the refs being undefined.