calebporzio's avatar

How to disable a bootstrap button in Vue 1.0

Ok, very simple question here:

How would I get vue to help me do this when a computed property is true:

<button class="btn">

and this when it if false:

<button class="btn" disabled>

Seems like such a simple task and I'm sure I've come across this before, help please?

Thanks, Caleb

0 likes
4 replies
bobbybouwmann's avatar

You can do something like this

<input v-model="agree" type="checkbox" /> Agree to this
<button v-attr="disabled: !agree">Submit</button>

 var app = new Vue({
    el: '#app',
    data: {
        agree: false
    }
});

So when the check box is checked, agree will be true and therefore the button will be enabled. The button will now be disabled by default

calebporzio's avatar
calebporzio
OP
Best Answer
Level 7

Found the solution:

<button class="btn" :disabled="someComputedProperty">

if "someComputedProperty" resolves to true, the disabled attr will show up, if false it won't.

Thanks, Caleb

2 likes

Please or to participate in this conversation.