How to disable button conditionally in Vuejs


We have seen some of the basic operations in vuejs . Now move on to advanced area. In the following example we will learn how conditionally disable command button.

When the user enter wrong input, we have to disable some submission button. ( for simplicity I skipped some portion of the template)

    <template>
.........
<button
:disabled="getTweetQuota < 0 || !newTweetContent"        
</button>
</template>

We can use the disabled property to disable it conditionally. We used two statements here , combined by or ( ||) statement which is optional.

Note that the : turned the disabled attribute of the button into a vue property. This method is applicable to any HTML attribute.

The following vue post posts may help you

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.