slug generator using vue

by SnehalKadwe

HTML

<script src="https://cdn.tailwindcss.com"></script>
<div id="app">
<h1 class="text-center my-5">
{{ msg }}
</h1>
  <div class="border shadow p-8 mx-5">
    <span class="font-medium">Title: </span> <input type="text" v-model="title"  class="border border-blue-600 rounded p-2 my-5 "/>
    <br>
    <div class="flex flex-row my-4 font-medium">
        <p class="mr-6">Slug:</p>
        <p id="slug" class="text-blue-500">http://ex.com/<span>{{ slug }}</span></p>
    </div>
  </div>
</div>

Vue

new Vue ({
  el: '#app',
  data() {
    return {
      msg: "Example of slug generator using Vue",
      title: '',
    }
  },
  computed: {
  	slug: function ()
    {
    	/* return this.title.toLowerCase()
    	        .replace(/\s+/gi, '-') // space to -
    	        .replace(/&/g, `-and-`) // & to and
    	        .replace(/--/g, `-`); // -- to -;
    	        ; */
     
      // or we can do this by calling a method
      let slug = this.createSlug(this.title);
      return slug;
    }
  },
  methods: {
  	createSlug(title) {
    	let slugTitle = title.toLowerCase()
      	.replace(/\s+/g, '-')
        .replace(/&/g, '-and-')
        .replace(/--/g, '-');
      return slugTitle;
    }
  }
});