Vue v-bind和AJAX

Question

I'm trying to move away from jQuery towards Vue 2.0, which for the most part the transition has felt very easy.

However, when making AJAX calls and interacting with the response I'm approaching it wrong and I can't get into the Vue mindset of doing things.

For example, I have a "Modal trigger" which when clicked opens a modal window and makes an AJAX call to a href which is bound to the trigger and then returns the the html to v-html in the modal. My problem comes when I want to have an @click event in the modal, obviously it doesn't work because Vue hasn't registered it, which makes sense.

In jQuery where I could just say for example $(document).on('click'... so that it could recognise any AJAX loaded pages, I cannot work out a similar option in Vue, I'm clearly approaching the situation wrong.

I've spent hours searching for a solution and I'm no further forward, could anyone with experience of similar situations please let me know how they overcame their issues or point me in the direction of tutorials that deal with similar problems.

Thank you in advance.

Answer 1

You need conditional rendering. And the point is, template is not conditional, data is. So the @click is actually always in your template, but with the data changes, you have different views, even different user interaction behaviours in your view.

• you want a button, but only when some condition flag is true, so in the data option, flag is false initially, but you load the real status from server via an AJAX call, which may set flag to true so the button shows. Template may be like <button v-if="flag" @click="clicked"></button>

• you want a button, always, but clicking it doesn't always do something(e.g. show an alert), so you have <button @click="clicked"></button>, and if(this.flag) {/*do something*/} in clicked, while flag is loaded by AJAX like above.