[Solved by @metalsadman] How to trigger an event when "+" button in q-uploader is clicked/how to dynamically disable/enable it.

[Mickey58]

I’m successfully using q-uploader to upload files to my server. What is missing is this little piece: I would like to enable the ability to add files through the “+” button only if a certain condition is met, more precisely: if a row is selected in a q-table above the q-uploader.

So my first question is how I can prevent that the user can add files through the “+” button? Is there an event and method for that? I tried @click=method() with a method that would display a message in case no row in q-table is selected, but is looks like q-uploader does not react to @click?

I’m alternatively trying to use the :disable property of q-uploader, but I’m not sure how I can dynamically disable or enable it, depending on whether the q-table has selected rows or not (this.selectedRowsTableXyz === 0) - this changes as soon as the user selects/de-selects rows in q-table - not sure there are other events that would notify me about that, so I could maybe have a watcher that would then enable/disable the q-uploader through a v-model on :disable.

Thanks for shedding some light on this “how to” question.

[metalsadman]

@Mickey58 on the model that your selected is bound to, just do a check on the length of the selected array to set the disable prop of your q-uploader to true/false. you didn’t show code so i assume you have setup the selected model and prop properly, like shown here https://quasar.dev/vue-components/table#Example--Single-selection.
like so. <q-uploader :disable="selected.length < 1" ... />

[Mickey58]

Thanks @metalsadman. The solution is through the :disable prop and it is again much simpler than I had assumed

On the :disable based solution, I got distracked by this silly mistake: I had put the computation of the selected.length in a compute function, intending to invoke it through <q-uploader :disable=“computeLength”>.

But I had accidentally written :disable=“computeLength()”, not “computeLength”. First, it is a bit hard to understand why one MUST use “computeLength” in this case of a computed “function”, not “computeLength()”, but worse, Vue raises a pretty misleading error message “computeLength is not a function” if one uses “computeLength()”…this made me believe that I’m on a completely wrong track.

It works fine now, simply using :disable=“computeLength”. Thanks for your quick help.

[metalsadman]

@Mickey58 you can read about the difference in the vue docs https://vuejs.org/v2/guide/computed.html#Computed-Properties https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

computed property don’t accept arguments that’s why computed() will not work.