Vue Identicon

index.html

<div id="app"></div>

script.js

new Vue({
  el: '#app',
  data: { // Initialize our list of 'ingredients'
    textInput: ''
  },
  computed: { // Turn data into viewable values
    identicon: function() {
      return jdenticon.toSvg(this.textInput, 200); // 200 is height & width
    },
    reverse: function() {
      return this.textInput.split('').reverse().join('');
    }
  },
  methods: { // Use these functions to change data
    onInput: function(event) {
      // console.log('Someone typed something');
      // console.log(event.target.value)
      this.textInput = event.target.value; // no need to refer as 'this.data.textInput'
    }
  },
  template: `
    <div>
      <h3>My Identicon Generator</h3>
      <div>
        Input:
        <input v-on:input="onInput"/>
      </div>

      <div>
        Output:
        {{ textInput.split('').reverse().join('') }}
        {{ reverse }}
        <div v-html="identicon"></div>
        <!-- {{identicon}} -->
      </div>
    </div>
  `
});

scripts

<script src="https://cdn.rawgit.com/dmester/jdenticon/5bbdf8cb/dist/jdenticon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

vue-identicon.markdown

Vue Identicon

A Pen by Pratik Naik on CodePen.

License.