2-Way Data Binding in VueJs

A simple demo of 2-way data binding in VueJs - http://coligo.io

by helloworld

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div class="main" id="vue-instance">
  <!-- this will be the DOM element we will mount our VueJs instance to -->
  Enter an image url:
  <input type="text" v-model="myimage">

  <div>imgUrl: {{imgUrl}}</div>
  <img class="insert" style="max-height:300px" v-show="imgUrl" v-bind:src="imgUrl">

  <p>
    Test URL is http://www.dixonscarphone.com/~/media/Images/D/Dixons-Carphone/logo/dixons-logo.png</p>
  <p> that would end up as</p>
  <p>http://www.dixonscarphone.com/~/media/Images/D/Dixons-Carphone/logo/home.jpg
  </p>
</div>

CSS

.main {
  position: relative;
  height: 300px;
  width: 300px;
}

.insert {
  height: 150px;
  width: 150px;
}

JavaScript

var vm = new Vue({
  el: '#vue-instance',
  data() {
  	return {
    	myimage: ''
    };
  },
  computed: {
    imgUrl() {
      let url = this.myimage;

      // validate URL in `this.myimage`
      try {
        url = new URL(url).toString();
      } catch (e) {
        url = '';
      }

      if (url) {
        const regex = /^(.+)\/.*$/ig;
        const matches = regex.exec(url);
    	  return matches && `${matches[1]}/home.jpg`;
      }
    }
  }
});

/* Regex to add is [^\/]+$ */

/* Test URL is http://www.dixonscarphone.com/~/media/Images/D/Dixons-Carphone/logo/dixons-logo.png that would end up as http://www.dixonscarphone.com/~/media/Images/D/Dixons-Carphone/logo/home.jpg*/