Change the value of a variable with vue js

Question

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 class="text-gray-600 body-font bg-gray-100">
        <div
          class="
            container
            xl:px-32
            px-5
            py-36
            mx-auto
            flex flex-wrap
            items-center
          "
        >
          <div class="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
            <h1
              class="
                title-font
                font-bold
                lg:text-7xl
                text-6xl text-white text-center
                md:text-left
              "
            >
              Materiality Reporting Tool (MRT)
            </h1>
            <p
              class="
                leading-relaxed
                mt-4
                lg:text-3xl
                text-2xl
                lg:max-w-xl
                font-medium
                text-white text-center
                md:text-left
              "
            >
              Tool for getting surveys data and plot it into a graph.
            </p>
          </div>
          <div
            class="
              lg:w-2/6
              md:w-1/2
              bg-white
              shadow-lg
              rounded-lg
              p-8
              flex flex-col
              md:ml-auto
              w-full
              mt-10
              md:mt-0
            "
          >
            <div class="relative mb-4">
              <input
                type="password"
                name="password"
                placeholder="Password"
                v-model="pass"
                class="
                  w-full
                  bg-white
                  rounded
                  border border-gray-300
                  outline-none
                  text-lg text-gray-700
                  py-1
                  px-3
                  leading-8
                  transition-colors
                  duration-200
                  ease-in-out
                "
              />
            </div>

            <div
              id="alertlogin"
              class="
                bg-red-100
                border border-red-400
                text-red-700
                px-4
                py-3
                rounded
                relative
                mb-3
              "
              role="alert"
              style="display: none"
            >
              <span class="block sm:inline">{{ this.alert }}</span>
            </div>

            <button
              @click="getpassword"
              class="
                text-black
                font-pluton
                border-0
                py-2
                px-8
                font-medium
                rounded
                text-xl
                bg-yellow
              "
            >
              ENTER
            </button>
          </div>
          <div
            class="
              lg:w-2/6
              md:w-1/2
              bg-transparent
              rounded-lg
              p-8
              flex flex-col
              md:ml-auto
              w-full
              mt-3
              md:mt-0
            "
          ></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.

Answer 1

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"
  class="
    bg-red-100
    border border-red-400
    text-red-700
    px-4
    py-3
    rounded
    relative
    mb-3
  "
  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()