The powerful combination of Nuxt, Vuex, and Computed Properties allows for

Currently exploring Nuxt.js with Vuex, I have created a basic form containing an email field, a password field, and a button.

All my state, mutations, and actions are functioning correctly. However, I encountered an issue when trying to create a computed property to validate the password length using an if statement.

Here is a glimpse of my Vuex state:

export default () => ({
// Register Init States
  registerEmail: null,
  registerPassword: null,
})

My mutation:

export default {
  setRegisterEmail(state, registerEmail) {
    state.registerEmail = registerEmail
  },
  setRegisterPassword(state, registerPassword) {
    state.registerPassword = registerPassword
  },
}

For the template section:

            <vs-input
              :value="registerPassword"
              label="Password"
              primary
              type="password"
              :progress="getProgress"
              :visible-password="hasVisiblePassword"
              icon-after
              @input="setRegisterPassword"
              @click-icon="hasVisiblePassword = !hasVisiblePassword"
            >
              <template #icon>
                <i v-if="!hasVisiblePassword" class="bx bx-show-alt"></i>
                <i v-else class="bx bx-hide"></i>
              </template>

              <template v-if="getProgress == 100" #message-success
                >Secure password</template
              >
            </vs-input>

The computed property for validating the password:

getProgress() {
      let progress = 0
      // at least one number
      if (/\d/.test(this.$store.state.auth.registerPassword)) {
        progress += 30
      }
      // at least one capital letter
      if (/(.*[A-Z].*)/.test(this.$store.state.auth.registerPassword)) {
        progress += 20
      }
      // at least a lowercase
      if (/(.*[a-z].*)/.test(this.$store.state.auth.registerPassword)) {
        progress += 25
      }
      // more than 8 characters
      if (this.$store.state.auth.registerPassword === null) {
        progress += 0
      } else if (this.$store.state.auth.registerPassword.length >= 8) {
        progress += 25
      }
      return progress
    },

Despite setting the password initial state as null, the input field seems to only retain the last character typed rather than the entire string entered.

For instance, typing "overflow" would result in my state password storing just the letter "w". Removing the password length validation allows the state to capture the complete word "overflow."

Wondering what might be causing this issue. Any insights or suggestions would be greatly appreciated! 🥺 Feeling quite perplexed at the moment. 😩

Answer â„–1

The issue arises when calling setRegisterPassword in the template. The input event only captures the last character entered. To address this, you can create a handler to update the value correctly. One approach is to use a local data property as a v-model binding and then assign setRegisterPassword to that value within the input handler.

            <vs-input
              v-model="localPassword"
              label="Password"
              primary
              type="password"
              :progress="getProgress"
              :visible-password="hasVisiblePassword"
              icon-after
              @input="handleRegisterPassword"
              @click-icon="hasVisiblePassword = !hasVisiblePassword"
            >

Add the following code:

data(){
 return {
   localPassword:''
 }
},
methods: {
  handleRegisterPassword() {
    this.setRegisterPassword(this.localPassword);
  }
}

Note: I am not familiar with vs-input, so your :value may function similarly to v-model, allowing you to keep it as is.

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

Accessing attribute value of selected option in AngularJS select element

I have a select tag that displays options, and I want it so that when an option is selected, the value of the data-something attribute is copied into the input element. This is just for demonstration purposes; the actual value should be sent in the form. ...

stop an html page from opening a new window

When using my HTML-based application, there are instances when it needs to open another URL within an iframe. However, a problem arises when the third-party URL within the iframe also opens a new window with the same content and URL. How can I prevent th ...

Executing a scroll down action with Selenium in combination with Node.js and the Chai/Mocha testing framework

Browser: Chrome Looking for ways to scroll up or down using Selenium with Node.js (JavaScript). ...

Issue with redeployment on render.com, Nuxt Encountered Fatal Error

The recent update was successfully pushed to Github, but the redeploy on the hosting platform is encountering errors that I can't quite identify. I followed the suggestion in the error message and ran npm rebuild, but it didn't resolve the issue. ...

Picture goes missing from slideshow

I am currently using a CSS + Javascript slideshow on my website, inspired by an example from the W3Schools website. Here is the code I have adapted for my web application: $(document).ready(function() { var slideIndex = 1; function showSlides(n) { ...

Troubleshooting jsPDF problem with multi-page content in React and HTML: Converting HTML to PDF

I need to convert HTML content in my React application into a PDF file. My current approach involves taking an HTML container and executing the following code snippet: await htmlToImage .toPng(node) .then((dataUrl) => { ...

Is there a way to update the state for a specific location on a map?

I have a requirement to update the quantity of a product by using setCount. let [product.quantity, setCount] = useState(product.quantity); Implementing increment and decrement functions for product.quantity const increaseQuantity = () => { setCoun ...

Apollo client combines objects when the 'id' property is not specified

When I query data from my Apollo server, it follows a specific structure as shown below: hero { image { id name mimeType url } title description } welcome { image { id name mimeType ...

How to deselect a checkbox in next.js when another one is selected

I'm looking to create a navigation system where clicking on a button scrolls to a specific section. However, I'm wondering how to deselect three inputs when one is selected in next.js using the code below. Do I need to modify each menu item indiv ...

Is there an rxjs operator that includes both on-next and on-error callbacks?

Is there a similar function to promise.then(onNextCallback,onErrorCallback) in rxjs that I can use? I've already tried alternatives like pipe(concatMap(),catchError) but they are not what I am looking for. ...

React - Incorporating Axios catch errors directly within form components

When a user registers, my backend checks if the email and/or username provided are already in use by another user. The response from Axios catch error is logged into the web console. I want to associate each email and username with their respective fields ...

Scroll a div using JavaScript/jQuery

I'm currently facing some challenges in resolving this issue. My goal is to pan a DIV using jQuery. The process is quite straightforward - on mouseDown, I capture X & Y coordinates and then subtract them from the newly obtained X & Y values during mou ...

What is the difference between achieving a mirror effect and a steel effect using Three.js?

When using three.js, I find myself a little confused about the concepts of metalness and roughness. Can someone explain the differences between metalness and roughness when applied to materials like mirrors and metals/steel? And furthermore, how can these ...

Vee-Validate: Are flags on the field value yielding undefined results? Explained with TypeScript

The documentation states that by using a flag on the value of a field, I should be able to obtain a boolean. For example: computed: { isFormDirty() { return Object.keys(this.fields).some(key => this.fields[key].dirty); } }, I am working ...

Issue with Vue.js devtool not appearing in browser

Currently, I am integrating moment.js into a Vue component but I am facing an issue where certain changes are not being reflected in vue devtools. Here is an example of my code: export default { data() { return { moment: moment(), ...

Experiencing difficulties with $watch in my Angular controller

Having trouble getting a $watch function to work properly while testing a controller. In this scenario, the goal is to display ctrl.value in either ARI format or AEP format, but the underlying $scope.model is always kept in the ARI format. When ctrl.value ...

"Troubleshooting the issue of AngularJS $http patch request failing to send

The information is successfully logged in the console when passed to replyMessage, but for some reason, the API does not seem to be receiving the data. Is the input field perhaps empty? replyMessage: function(data) { console.log(data); ...

JavaScript: Retrieving the coordinates of the visible area of an element

Is there a way to calculate the visible area of an element on the screen, taking into account any hidden parts due to CSS properties like overflow: scroll and position: absolute? The goal is to create a function called getVisiblePart(el) that will return ...

Create a composition of several debounce promises in JavaScript

I am looking for a way to efficiently manage multiple costly server calls by continuously invoking a function that accepts a key and returns a promise containing an object. This object is guaranteed to have the requested key along with additional values, i ...

Setting the region in Firebase functions is not supported

I have encountered an issue while trying to set a deployment region for my functions. The documentation states that I should use the following code: var functions = firebase.app().functions('us-west2'); However, when I implement this and attemp ...