Kebab Case Input

by Katarn

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
  <input
    v-model="input"
    @input="toKebab"
    @blur="trimEdges"
  >
</div>

CSS

input {
  width: 100%;
}

JavaScript

Vue.createApp({
  data() {
    return {
      input: '',
    }
  },

  methods: {
    toKebab() {
      this.input = this.input
        .toLocaleLowerCase()
        .replace(/[^a-z0-9]/g, '-')
        .replace(/-+/g, '-')
    },
    trimEdges() {
      this.input = this.input
        .replace(/^-|-$/g, '')
    }
  }
}).mount('#app')