Computed Property Show/Hide DIV-CodePudding

I am not a vue.JS programmer, but have been asked to jump in and make a few changes to an existing app. I am trying to use a computed property to show/hide a DIV.

The problem is the computed property is not being called after the form POST (I put a console.log statement inside the computed method to verify it's not even being called). The findLoginProvider method is invoked successfully and the localStorage items are set... but the DIV is not hidden.

Like I said, I am not a vue.JS programmer and cannot figure out why this isn't working... this is a simplified example of the real page. I really want computed properties to work because I have multiple DIV's to show/hide based on a few computed properties (so manually settings the visibility of a specific DIV is not desired)

HTML:

<div v-if="showFindLoginProvider" :>
  <form @submit.prevent="findLoginProvider" method="POST">
    <div>
      <label >Email Address</label>
      <input
        type="email"
        name="email"
        v-model="email"
        placeholder="Enter Email Address"
        autofocus
        autocomplete
        required
        />
    </div>
    <button type="submit">Continue</button>
  </form>
</div>

Methods:

findLoginProvider() {
      this.isLoading = true;
      UserService
        .getLoginProvider(this.email)
        .then((response) => {
          if (response?.status === 200) {
            localStorage.setItem("login_email", this.email);
            localStorage.setItem("login_provider", JSON.stringify(response.data));              
          } else {
              this.isError = "Error retrieving login provider";
          }});

      this.isLoading = false;
    },

Computed:

showFindLoginProvider() {
      console.log("showFindLoginProvider")
      return !this.isLoggedIn && (!this.hasLoginEmail || !this.hasLoginProvider);
    },

CodePudding user response：

According to the docs

A computed property will only re-evaluate when some of its reactive dependencies have changed

By saying that in your fnc findLoginProvider you need to change reactive variable to fire showFindLoginProvider run

findLoginProvider() {
  this.isLoading = true;
  UserService
    .getLoginProvider(this.email)
    .then((response) => {
      if (response?.status === 200) {
        // will tell computed to run
        this.isLoggedIn = true
        // rest of your code
      } else {
        this.isError = "Error retrieving login provider";
      }
    });
  this.isLoading = false;
},