Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to conditionally disable the input taking in VueJS?
For removing the disabled property, we can use the disabled tag available in VueJS. The disabled tag basically checks for the boolean value and decides if the input tag needs to be displayed or not. We set the value in app.js and dynamically change its value based on the toggle feature.
To apply the :disabled, we will first create a div element with id ‘app’. Once the div element is created, we can apply the disabled property to the element by initializing the data content.
Syntax
Following is the syntax to disable the input taking in Vue.js −
@click = "disabled"
Example
First, we need to create a Vue project. To do this you can refer to this page. Create two files app.js and index.html in your Vue project. Copy and paste the below code snipped in your Vue project and run the Vue project. You shall see the below output on the browser window.
FileName - app.js
Directory Structure -- $project/public -- app.js
// Setting the default value as false
var app = new Vue({
el: '#app',
data: {
disabled: 0
}
});
FileName - index.html
Directory Structure -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<title>
VueJS | v-else directive
</title>
<!-- Load Vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<b>
VueJS | v-else directive
</b>
</div>
<div id="app" style="text-align: center;">
<button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
<input type="text" :disabled="disabled == 1">
<pre>{{ $data }}</pre>
</div>
<script src='app.js'></script>
</body>
</html>
Run the following command to get the below output −
C://my-project/ > npm run serve
Complete Code
Let’s create a complete code by combining the above two files- app.js and index.html. We can now run the code as an HTML program.
<!DOCTYPE html>
<html>
<head>
<title> VueJS | v-else directive </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div style="text-align: center;">
<b> VueJS | v-else directive </b>
</div>
<div id="app" style="text-align: center;">
<button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
<input type="text" :disabled="disabled == 1">
<pre>{{ $data }}</pre>
</div>
<script>
// Setting the default value as false
var app = new Vue({
el: '#app',
data: {
disabled: 0
}
});
</script>
</body>
</html>
When you click the "Toggle Enable" button, the input field gets disabled and you are not able to enter any character. So we can just toggle the button to enable and disable the input column.
2K+ Views
