Disable all buttons on page?

Im looking for a way to disable all buttons on one page whilst waiting for an operation that takes approx 6-8 seconds. I was wondering if there is a way to achieve this without having to do

<button :disabled="loading"></button>

on every single button?

Im quite familiar with the jQuery way of doing it:

$(':button').prop('disabled', true)

Help is appreciated :slight_smile:

There isn’t a quick an easy way of doing it.

What about a different approach which also provides better feedback to the user that something is happening? Try this “loading…” obsfucator: https://jsfiddle.net/vLs7eg5o/

You could use document.querySelectorAll. Like @wildhart I’d probably suggest a different way, but if you really want to, I’d use document.querySelectorAll. Docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

I suggest to create custom component as simple renderless wrapper (Button) with behavior of disabling it with some kind od event or global state like vuex. In this component just observe this value.

Then if u need to disable all of them just call this action /event.

Vue is about state and it should be used this way.