Created
December 21, 2016 20:52
-
-
Save praveensewak/0ccaf73cb79a11b41cf19a97b11287e7 to your computer and use it in GitHub Desktop.
VueJs helpers (watchers, debounce)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Since there is already a rich ecosystem of ajax libraries --> | |
| <!-- and collections of general-purpose utility methods, Vue core --> | |
| <!-- is able to remain small by not reinventing them. This also --> | |
| <!-- gives you the freedom to just use what you're familiar with. --> | |
| <script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script> | |
| <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script> | |
| <script> | |
| var watchExampleVM = new Vue({ | |
| el: '#watch-example', | |
| data: { | |
| question: '', | |
| answer: 'I cannot give you an answer until you ask a question!' | |
| }, | |
| watch: { | |
| // whenever question changes, this function will run | |
| question: function (newQuestion) { | |
| this.answer = 'Waiting for you to stop typing...' | |
| this.getAnswer() | |
| } | |
| }, | |
| methods: { | |
| // _.debounce is a function provided by lodash to limit how | |
| // often a particularly expensive operation can be run. | |
| // In this case, we want to limit how often we access | |
| // yesno.wtf/api, waiting until the user has completely | |
| // finished typing before making the ajax request. To learn | |
| // more about the _.debounce function (and its cousin | |
| // _.throttle), visit: https://lodash.com/docs#debounce | |
| getAnswer: _.debounce( | |
| function () { | |
| var vm = this | |
| if (this.question.indexOf('?') === -1) { | |
| vm.answer = 'Questions usually contain a question mark. ;-)' | |
| return | |
| } | |
| vm.answer = 'Thinking...' | |
| axios.get('https://yesno.wtf/api') | |
| .then(function (response) { | |
| vm.answer = _.capitalize(response.data.answer) | |
| }) | |
| .catch(function (error) { | |
| vm.answer = 'Error! Could not reach the API. ' + error | |
| }) | |
| }, | |
| // This is the number of milliseconds we wait for the | |
| // user to stop typing. | |
| 500 | |
| ) | |
| } | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment