Base62 with Vue and axios

Encodes and decodes using external API call with Vue.js and axios()

by Ismail Ibraheem Shurrab

HTML

<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<div id="app">
  <p>{{ encoded }}</p>
  <p>{{ decoded }}</p>
  <p>{{ error }}</p>
</div>

JavaScript

/* http://base62.net/ */

var app = new Vue({
    el: "#app",
    data: {
        encoded: "Encoding...",
        decoded: "Decoding...",
        error: null
    },
    created: function () {
        var self = this
        axios
            .post("https://api.base62.net/encode", {data: "Hello world!"})
            .then(function (response) {
                self.encoded = response.data.encoded
            })
            .catch(function (error) {
                self.error = "Could not reach the API: " + error
            })

        axios
            .post("https://api.base62.net/decode", {data: "T8dgcjRGuYUueWht"})
            .then(function (response) {
                self.decoded = response.data.decoded
            })
            .catch(function (error) {
                self.error = "Could not reach the API: " + error
            })
    }
});