I have a problem , I'm new using vue js and I'm developing a web app with vue 3 using vuex. I have this component called protected

<template>
  <div>
    <div>
      <section >
        <div
          
        >
          <div >
            <h1
              
            >
              Materiality Reporting Tool (MRT)
            </h1>
            <p
              
            >
              Tool for getting surveys data and plot it into a graph.
            </p>
          </div>
          <div
            
          >
            <div >
              <input
                type="password"
                name="password"
                placeholder="Password"
                v-model="pass"
                
              />
            </div>

            <div
              id="alertlogin"
              
              role="alert"
              style="display: none"
            >
              <span >{{ this.alert }}</span>
            </div>

            <button
              @click="getpassword"
              
            >
              ENTER
            </button>
          </div>
          <div
            
          ></div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import router from '../router'
import { mapState } from "vuex";
import { mapMutations } from "vuex";
export default {
  name: "Protected",

  data() {
    return {
      pass: null,
      alert: null,
    };
  },


  methods: {

    getpassword() {
      if (this.pass == null) {
        $("#alertlogin").show();
        this.alert = "Please enter your password.";

      } else {
        let configforms = {
          method: "get",
          url: `http://localhost/typeform_surveys_new/api.php?request=login&pass=${this.pass}`,
        };

        axios(configforms)
          .then(function (response) {
            console.log(response.data)
            if (response.data === 1) {
              sessionStorage.setItem('authvox',1)
              router.push("/home");
            } else {
              $("#alertlogin").show();
              this.alert = "Password Incorrect.";
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
  },
};
</script>

in my data object I have the alert set with value null, then i print the alert value into the html using this.alert... I have a method calleed getpassword which validates if the input is empty or if the value the user enter on that input is incorrect. If it is empty the alert shows a message "Please enter a password", if the value the user typed is wrong the alert shows a message "Password incorrect"... I change the value of the alert doing: this.alert = "Password incorrect" or this.alert = "Please enter your password."; ... My code works when the user leaves the input empty, the program shows the message saying "Please enter a password" but when the input is not empty and the user typed an incorrect password, I get this error: TypeError: Cannot set properties of undefined (setting 'alert')

I tried using computed but still the same error. The funny thing is that if I put the this.alert = "Password Incorrect." outside the axios method it works.

CodePudding user response：

Firstly I would exclude the use of jQuery and use the native v-show or v-if to show/hide a section.

Why the value won't update I think is because this.alert inside the Axios function refers to axios. What I do most of the time is define it in the code as a different constant.

function getpassword(){
  const self = this
  axios(configforms)
      .then(function (response) {
        console.log(response.data)
        if (response.data === 1) {
          sessionStorage.setItem('authvox',1)
          router.push("/home");
        } else {
          $("#alertlogin").show();
          self.alert = "Password Incorrect.";
        }
      })
  
}

Also you shouldn't use sessionStorage but should use vuex. It's a way better state management and really easy and in combination with vuex-persistedstorage you would use localStorage

I would add below the v-show in favor of jQuery

<div
  id="alertlogin"
  v-show="alert"
  
  role="alert"
  style="display: none"
>

Also I don't think you have to import router manually. If you registered into your main.js file then you can just reference it as this.$router.push()