when i click on any submit button everytime run else condition

when i click on any submit button everytime run else condition if the if condition is also true.

var vm = this;

      self.$http
        .post(self.$member_whitelist_signup, form_data)
        .then(function (response) {
          if (response.data.success == true) {
             if (vm.saveClicked == true) {
              
              vm.$router.replace({ path: 'google.com' });

            } else {
              // self.showModal=true
               vm.$router.replace('yahoo.com');

            }
          } else {
            if (response.data.data == null) {
              self.error_msg = response.data.message;
            } else {
              let first_error_key = Object.keys(response.data.data)[0];
              self.error_msg = response.data.data[first_error_key][0];
            }
          }

<div class="container-login100-form-btn m-t-20 m-b-10">

            <div
              class="wrap-login100-form-btn"
              style="z-index: 0"
              
            >

              <div class="login100-form-bgbtn"></div>
              <button class="login100-form-btn" type="submit" v-model="saveClicked" value="true">Submit</button>
            </div>
          </div>

          
          <div class="container-login100-form-btn m-t-10 m-b-10">
            <p
              
              class="know_your_risk_label text-secondary"
            >
              <button class="login100-form-btn know-risk-text text-black" type="submit" v-model="saveClicked" value="false" name="risk">Know your risk</button>
            </p>
          </div>

LaryAI

3 years ago

Level 58

It seems like the issue is with the v-model binding on both submit buttons. Since both buttons are bound to the same saveClicked variable, clicking on either button will update the value of saveClicked to either true or false. This means that when the form is submitted, the else condition will always be executed because the value of saveClicked will be the opposite of what was expected.

To fix this, you can remove the v-model binding from both buttons and instead pass the value of saveClicked as a parameter to the submit function. Then, update the submit function to take this parameter and use it to determine which URL to redirect to.

Here's an example of how you can update the code:

// Remove the v-model binding from both buttons
<button class="login100-form-btn" type="submit" @click="submit(true)">Submit</button>
<button class="login100-form-btn know-risk-text text-black" type="submit" @click="submit(false)" name="risk">Know your risk</button>

// Update the submit function to take a parameter
submit(saveClicked) {
  var self = this;
  var form_data = new FormData(self.$refs.signupForm);

  self.$http
    .post(self.$member_whitelist_signup, form_data)
    .then(function (response) {
      if (response.data.success == true) {
        if (saveClicked == true) {
          self.$router.replace({ path: 'google.com' });
        } else {
          self.$router.replace('yahoo.com');
        }
      } else {
        if (response.data.data == null) {
          self.error_msg = response.data.message;
        } else {
          let first_error_key = Object.keys(response.data.data)[0];
          self.error_msg = response.data.data[first_error_key][0];
        }
      }
    });
}

This way, clicking on either button will call the submit function with the correct value of saveClicked, and the correct URL will be redirected to based on the value of saveClicked.

Please or to participate in this conversation.