25.06.2018 Views

Full-Stack Vue.js 2 and Laravel 5

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Methods<br />

The <strong>Vue</strong> configuration object also has a section for methods. Methods are not<br />

reactive, so you could define them outside of the <strong>Vue</strong> configuration without any<br />

difference in functionality, but the advantage to <strong>Vue</strong> methods is that they are<br />

passed the <strong>Vue</strong> instance as context <strong>and</strong> therefore have easy access to your other<br />

properties <strong>and</strong> methods.<br />

Let's refactor our escapeKeyListener to be a <strong>Vue</strong> instance method.<br />

app.<strong>js</strong>: var app = new <strong>Vue</strong>({ data: { ... }, methods: { escapeKeyListener:<br />

function(evt) { if (evt.keyCode === 27 && this.modalOpen) { this.modalOpen<br />

= false; } } }, watch: { ... },<br />

created: function() { document.addEventListener('keyup',<br />

this.escapeKeyListener); } });

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!