screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue Js Disable Submit Button if Input File is Empty</h3> <!-- Input file element --> <input type="file" v-on:change="updateFile" /> <!-- Submit button with dynamic 'disabled' attribute --> <button v-bind:disabled="isFileEmpty" v-on:click="submitForm">Submit</button> </div> <script> const app = new Vue({ el: "#app", data() { return { selectedFile: null, }; }, methods: { updateFile(event) { // Update selectedFile when the file input changes this.selectedFile = event.target.files[0]; }, submitForm() { // Handle form submission logic here console.log("Form submitted!"); }, }, computed: { isFileEmpty() { // Check if the selectedFile is empty or not return this.selectedFile === null; }, }, }); </script> <style scoped> #app { margin: 0 auto; width: 500px; text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); padding: 20px; } input[type="file"] { margin-top: 10px; } button { margin-top: 20px; padding: 10px 20px; background-color: #3498db; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:disabled { background-color: #95a5a6; cursor: not-allowed; } button:hover:enabled { background-color: #2980b9; } </style> </body> </html>