Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- new Vue({
- el: '#app',
- data: {
- usd: '',
- canadianDollar: '',
- europeanPound: '',
- europeanEuro: ''
- },
- // Watch methods
- watch: {
- usd: function() {
- this.convertCurrency()
- }
- },
- // Logic Methods
- methods: {
- convertCurrency: _.debounce(function() {
- var app = this;
- if (app.usd.length !== 0) {
- // Show that the things are loading in.
- app.canadianDollar = 'Searching...'
- app.europeanPound = 'Searching...'
- app.europeanEuro = 'Searching...'
- console.log(app.usd)
- axios.get("http://api.fixer.io/latest?base=USD&" + app.usd)
- .then(function(response) {
- app.canadianDollar = response.data.CAD
- app.europeanPound = response.data.GBP
- app.europeanEuro = response.data.EUR
- })
- .catch(function(error){
- app.canadianDollar = "ERROR"
- app.europeanPound = "ERROR"
- app.europeanEuro = "ERROR"
- })
- }
- }, 500)
- }
- })
- <!DOCTYPE html>
- <html>
- <head>
- <title>Welcome to Vue</title>
- <script src="https://unpkg.com/vue/dist/vue.js"></script>
- </head>
- <body>
- <div id="app">
- <input type="text" name="" value="" v-model="usd">
- <ul>
- <li>Canadian Dollar: {{canadianDollar}}</li>
- <li>European Pound: {{europeanPound}}</li>
- <li>European Euro: {{europeanEuro}}</li>
- </ul>
- </div>
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- <script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js" charset="utf-8"></script>
- <script src="index.js" charset="utf-8"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement