Disabling/enabling buttons by data in Vue.js?

Question

I'm having a look at Vue.js with a view to simplifying an application which is starting to get a bit too complex with jQuery. I want to utilise the data binding so that the state of an 'Order' object automatically enables or disables certain buttons (e.g., I want the submit button to be automatically disabled unless an order, containing items, exists). I have something which partly works, with this declaration:

 var content = new Vue({
    el: '#content',
    computed: {
        orderExists: function () {
            return (shopOrder != null && !isEmpty(shopOrder.items));
        }
    }
});

I use it in a button like this:

<button type="button" id="btnDisplay" v-bind:disabled="!orderExists">Show Selected</button>

On page load, the buttons using this technique are indeed enabled/disabled correctly. However, when I add items to the order object, thereby changing its state, I'm not seeing any update in the buttons' states - they should be being enabled.

I assume I'm misunderstanding something basic about how this works with Vue.js, as I've only spent a couple of hours with it, so any help would be appreciated.

jnieto · Accepted Answer · 2016-11-03 01:55:23Z

2

Hmmm why not pass the property as reactive data?

You can do something like:

...
computed: {
        orderExists: function () {
            this.disabled = (shopOrder != null && !isEmpty(shopOrder.items));
        }
    }

Fiddle.

DP: the example is in Vue 2

answered Nov 3, 2016 at 1:55

jnieto

1,9272 gold badges16 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David K. Hess Over a year ago

This won't work because if shopOrder is a plain JavaScript object that hasn't been made reactive by Vue, orderExists will never fire when it changes and disabled will never update. For more info see vuejs.org/guide/computed.html and read the "Computed Caching vs Methods" section. Also, there's no point in making this approach a computed because the value will always be undefined since it doesn't return a value.

David K. Hess · Accepted Answer · 2016-11-03 13:53:42Z

2

The issue is that Vue has to manage your data objects in order to set them up in a way where it can observe the changes to them (i.e. be made reactive). This is done by specifying the data option to your Vue creation. Something like:

data: {
    shopOrder: null
}

Then update your code like this:

orderExists: function () {
    return (this.shopOrder != null && !isEmpty(this.shopOrder.items));
}

And of course at some point you need to set this.shopOrder to a valid order object.

edited Nov 3, 2016 at 13:53

answered Nov 3, 2016 at 1:56

David K. Hess

17.3k2 gold badges53 silver badges77 bronze badges

4 Comments

John Moore Over a year ago

I woke in the night with this very answer myself! I realised I had neglected to make it managed data. I've been working a bit with React.js in the last year and the same thing applies there, so I should have thought of that. I just have to read up about managing data now.

John Moore Over a year ago

Still struggling with this, actually. I think my problem may be to with the way I'm updating my shopOrder property, possibly messing up the proxying. If I assign a new object to shopOrder , as opposed to updating its properties, should this still work? That is, if I do something like 'content.shopOrder=newOrder'? Failing that, is it permissible to add new properties to an existing managed data object?

David K. Hess Over a year ago

It might help to see some code in a Fiddle. You have to make sure that the object is contained within the Vue itself using the data option and then later referencing it with this in the context of methods.

John Moore Over a year ago

Slightly awkward to condense down the problem into a Fiddle. But in any case I actually now have this working as a result of giving up on the idea of trying to keep the Vue data in sync with the existing object I was using before. I've now switched everything to use the Vue data and dispensed with the old object.

Collectives™ on Stack Overflow

Disabling/enabling buttons by data in Vue.js?

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related