Performance of q-input with type=textarea in a transition-group
-
I have a list of about 30 items in a transition-group, each list item includes a <q-input type=“textarea”…>, the render of the page has been very slow on Chrome and extremely slow on Safari(both on Mac, it’s much faster on Firefox 57/Quantun). When changing to native textarea control, it all works fine. It also works fine when removed the transition-group and still use textarea type q-input. I understand the transition-group has some potential performance issues with complex css in a list (https://github.com/vuejs/vue/issues/5845), just wondering if @rstoenescu or anyone else has any advice here? I could change to use native textarea input but the style does not quite match the rest of controls on the page, and I really like the auto-grow feature of the q-input. Thanks.
-
I have the same problem. Did you get a solution for that?
-
You could try to
Object.freeze()your data: -
Thank you, @dobbel! I really appreciate the suggestion. It was a really good one. However, I will have to try something else… It masters the performance, but kills the interactivity. Once I focus out the input, the initial value of it gets back. Even though the ability to save the changes is intact and the user gets the new info on refresh, it’ll be a problem in terms of user experience.
Any other suggestions?
-
You could try something like this with
v-bind:value:
https://jsfiddle.net/gs0kphvc/Because you are using 1-way data binding now. You’ll have to manually ‘save’ the new input data’ yourself.
You could have a submit like save button to collect all the new data( like how vanilla html forms work) . Or you could use @blur(lose focus) to save the data.
