1

I have a button named continue, what I want to do is on clicking I want to check a condition if isUpgrade is true or not. If its true it has to execute proceedToPayment = true and if its false the other one validateSite() - (need to call a method).

<button type="button" class="btn btn-info" @click="isUpgrade ? proceedToPayment = true : validateSite()">Continue</button>

The above code is not working. Is this really possible? If it is where have I got it wrong?

I have referred to this Stack Overflow Question - Conditional @click with a method in vuejs but I'am not really getting the answer to it.

Improve this question
1
  • 1
    Err, why are you ternary true/false cases strings and not expressions? Remove the single quotes around your assignment expression and your method call expression. Commented May 26, 2020 at 17:26

3 Answers 3

Reset to default
2

You dont need single quotes:

<button type="button" class="btn btn-info" @click="isUpgrade ? {proceedToPayment = true} : { validateSite() }">Continue</button>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you so much. Missed that
2

You can just take away the quotation marks in the ternary:

new Vue({
  el: "#app",
  data: {
    isUpgrade: false,
    proceedToPayment: false
  },
  methods: {
    validateSite() {
      console.log('working')
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <button type="button" class="btn btn-info" @click="isUpgrade ? proceedToPayment = true : validateSite()">Continue</button>
</div>

Improve this answer

Comments

1

With single quotes you have a string. Remove the quotes and it should work like this:

var app = new Vue({
  el: '#app',
  data: {
    isUpgrade: true,
    proceedToPayment: false
  },
  methods: {
    validateSite: function() {
      alert('validateSite called!');
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button type="button" class="btn btn-info" @click="isUpgrade ? proceedToPayment = true : validateSite()">Continue</button>

  {{ proceedToPayment }}
</div>

Improve this answer

1 Comment

Thanks for your time. Missed that

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.