Ways to deactivate a button in Vuejs when no data is present

<input
                      :type="passwordFieldType"
                      v-model="user.password"
                      id="password"
                      name="password"
                      class="input-section-three-register"
                      value=""
                      placeholder="Enter new password"
                      autocomplete="off"
                       @change="disabledSubmit"
                    />
                    
  <input
                      :type="passwordFieldTypetwo"
                      v-model="user.confirmPassword"
                      id="confirmPassword"
                      name="confirmPassword"
                      placeholder="Confirm password"
                      value=""
                      autocomplete="off"
                      :disabled="user.password.length < 8"
                      @change="disabledSubmit"
                    />


 mounted() {
    this.disabledSubmit();
  },

disabledSubmit() {
     this.disableButton = this.user.password.length<8 || 
         this.$v.user.password.$error ||
         this.user.password!==this.user.confirmPassword;
},
<button
    type="submit"
    :disabled="disableButton"
> 
     Click me
</button>

The issue with the given code is that even if no data is entered initially, the button can still be clicked. The disable function only works after entering some data.

Answer №1

To solve the issue, you should remove the variable this.disableButton completely and replace it with a function:

getSubmitDisabled() {
     return this.user.password.length<8 || 
         this.$v.user.password.$error ||
         this.user.password!==this.user.confirmPassword; 
},

You can then implement it in this manner:

<button :disabled="getSubmitDisabled()">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to hosting a Vite application without relying on a third-party service

Is there a proper way to serve a Vite app in a Docker container without breaking Vite proxies and Vue Router? I can't use "npx serve" as it causes issues. How can I serve my app without any problems? I don't want to run "npm run dev" in productio ...

Altering the innerHTML of a <p> tag with a smooth transition

I am a beginner in the world of web design. I am currently working on a project where I need to continuously change the text inside a <p> element with a transition effect similar to a slideshow. Below is the code I have so far: <p id="qu">S ...

What sets ElButton apart from el-button when utilized in the element-plus library within a Vue application?

When referencing the element-plus official documentation, the component was imported as follows: ElButton, and used like this: el-button. In my experience, using element-plus in this manner: ElButton also functions correctly. I am curious about the disti ...

Angular project icons not displaying in the browser

My current project in Angular was functioning properly until recently. I am facing an issue where the images are not being displayed on the browser when I run ng serve, resulting in a 404 error. Interestingly, everything else seems to be working fine witho ...

What is the best method in typescript to combine objects in an array with identical properties but varying values?

interface IData{ cabinTo:string[]; cabinFrom:string; } const dataAfterIteration= [{cabinTo:"A",cabinFrom:"B"}, {cabinTo:"A",cabinFrom:"C"}, {cabinTo:"B",cabinFrom:"C"}, { ...

Having trouble with your Bootstrap 4 Dropdown Menu?

I attempted to implement the dropdown menu example from Bootstrap 4, but unfortunately it does not seem to be working as expected. The dropdown menu does not appear when clicked. <li class="nav-item dropdown"> <a class="nav-link dropdown-to ...

Exploring the power of Vue with Cypress testing and streamlining the development process

Currently, I am facing a challenge while trying to run my E2E tests on Gitlab using their CI/CD platform. The issue I'm encountering is the inability to have both my development server and Cypress running simultaneously in order for the E2E tests to ...

Does anyone have any insight on why I can't seem to remove an item from my list of tasks?

Having trouble with my React todo list. After submitting, the list item looks fine. I expect to be able to delete it by clicking on the item, but nothing happens. When I try to add another item, the page refreshes and all items are removed. The console ...

javascript snippet for extracting the dynamically created div IDs

Currently, I am developing an application using Java and AngularJS. Within this project, there is an HTML page that iterates through an object to display the values on the page. Here is the snippet of the HTML code: <div id="{{value.pageIndex}}" ng-re ...

Developing a Fresh Settings Tab and Vue Module in Laravel Spark

When working with Laravel Spark, you'll find that most settings panels come with a corresponding Vue JS component that is called upon using a custom tab. <spark-create-tests :user="user" inline-template> <div> </div> </sp ...

Using Jquery to match array elements in order to generate a unique calendar display

I'm facing an issue with creating a view that involves three different arrays. The first array consists of resources, the second array contains dates, and the third array contains the data I'm trying to match with both the resource and date. My g ...

Utilize Vue to pass only a specific component from a v-for loop as a prop, leaving the rest

Having an issue with Vuejs, specifically with a component (file upload) that is rendered inside a parent in a v-for loop. I am passing a prop to it to conditionally render a remove button (which basically removes the background from the div as a preview). ...

Using Express js, invoke a function object from a route

Here's a snippet of my code: router.route('/user') .post(function(req, res, next){ queryDB(arg1, arg2, prepareRes) }) .get(function(req, res, next){ queryDB(arg3, arg4, prepareRes) }); var prepareRes = function(err, data){ if ...

The command "cordova" cannot be identified as a cmdlet

After running the npm command, Cordova was successfully installed on my system. The files and folders can be found in the directories %appdata%/npm and %appdata%/npm/node_modules. However, when attempting to use any Cordova command within the VS Code termi ...

JavaScript - the global and local variable dilemma

REVISED2: I'm encountering an issue with converting images to canvas using Pixastic in HTML5. How can I 'return' this converted image back to a global variable? Any suggestions? <img id="mainIllustration" alt="main illustration" src="Img ...

JavaScript/jQuery: neglecting to incorporate a function within Angular

I'm attempting to implement a French datepicker in Angular, but I'm encountering difficulty in invoking the function within my component. datefrench.js !function(datefrench){datefrench.fn.datepicker.dates.fr={ days:["dimanche","l ...

Uncovering the origin of a problematic included file

When using Sencha Touch, it is common to encounter issues related to missing files. In most cases, simply including the file resolves the issue. However, there are instances where the problem lies in a faulty include, requiring you to locate where the file ...

What is the process for executing JavaScript within an ASP.Net Web Form application's update panel using server-side code?

I am facing a challenge with implementing JavaScript code within an update panel in my ASP.Net web form application using server-side code. Interestingly, the code I have only seems to work when placed outside of the update panel, and not within it, even w ...

What are the steps to designing a unique JSON data format?

When working with a JSON data structure containing 100 objects, the output will resemble the following: [{ "Value": "Sens1_001", "Parent": Null, "Child": { "Value": "Sens2_068", "Parent":"Sens1_001", "Child" : { ...

Step-by-step guide to rapidly resolve all issues in VS Code using TypeScript

After extensive searching in VS code, I have not been able to find a quick fix all solution in the documentation or plugins. Is this feature actually non-existent, or is it possible that I am overlooking a keybinding? (I am currently utilizing typescript s ...