AES demo with vuejs

AES demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<div id="app">
  Message: <input type="text" v-model="message" lazy @change="encrypt">
  encryptsecret: <input type="text" v-model="encryptsecret" lazy @change="encrypt">
  decryptsecret: <input type="text" v-model="decryptsecret" lazy>

  <div v-for="item in encrypted">
    {{$key}} : {{ item}}
  </div>
  decrypted: {{decrypted}}
</div>

JavaScript

var cryptobject;

new Vue({
  el: '#app',
  data: {
    message: 'Message ',
    encryptsecret: 'Secret Passphrase',
    encrypted: false,
    decryptsecret: 'Secret Passphrase'
  },
  computed: {
  	decrypted: function() {
  		return (this.encrypted ? CryptoJS.AES.decrypt(this.encrypted.str, this.decryptsecret).toString(CryptoJS.enc.Latin1) : 'fred');
    }
  },
  methods: {
  	encrypt: function() {
       cryptobject = CryptoJS.AES.encrypt(this.message, this.encryptsecret);
       this.encrypted = {
       	key: cryptobject.key + '', // don't send this
        iv: cryptobject.iv + '', // don't send this
        salt: cryptobject.salt + '', // don't send this
        ciphertext: cryptobject.ciphertext + '', // don't send this
        str: cryptobject + '' // send or store this
      } 
  	}
  }})