使用vuejs更改變數的值

我有一個問題，我是使用 vue js 的新手，我正在使用 vuex 開發帶有 vue 3 的 Web 應用程式。我有這個組件叫做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>

在我的資料物件中，我將警報設定為 null，然后我使用 this.alert 將警報值列印到 html 中...我有一個方法叫做 getpassword，它驗證輸入是否為空或用戶輸入的值該輸入不正確。如果為空，警報顯示訊息“請輸入密碼”，如果用戶輸入的值錯誤，警報顯示訊息“密碼不正確”...我更改警報的值：this.alert = "密碼不正確" or this.alert = "請輸入您的密碼。"; ...我的代碼在用戶將輸入留空時作業，程式顯示訊息“請輸入密碼”但當輸入不為空且用戶輸入錯誤密碼時，我收到此錯誤：TypeError：無法設定未定義的屬性（設定“警報”）

我嘗試使用計算但仍然是同樣的錯誤。有趣的是，如果我把 this.alert = "Password Incorrect"。在 axios 方法之外它可以作業。

uj5u.com熱心網友回復：

首先，我會排除使用 jQuery 并使用本機v-show或v-if顯示/隱藏部分。

我認為為什么值不會更新是因為this.alert在 Axios 函式內部參考了 axios。我大部分時間做的是在代碼中將其定義為不同的常量。

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.";
        }
      })
  
}

我會在下面添加v-show支持 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"
>

標籤：

上一篇：將資料發送到Vue中的占位符

下一篇：Vue3不更新行內樣式