Currently, I am working on a feature where I want to extract the value from one input field, convert it into a slug format, and display it in another input field. This project involves Laravel Spark, Vue, and Bootstrap 4.
Here is the content of my listings.blade.php:
<createlisting inline-template>
<div class="container">
<h1>
Create a listing
</h1>
<form class="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" v-on:keyup="listingslug" id="name" name="name" placeholder="Example input placeholder">
</div>
<label for="slug">Your vanity URL</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">{{ env('APP_URL') }}/listing/</span>
</div>
<input type="text" class="form-control" id="slug" name="slug" aria-describedby="basic-addon3">
</div>
</form>
</div>
</createlisting>
The above code snippet is included in a file named createlisting.js.
Vue.component('createlisting', {
data() {
return {
form: new SparkForm({
name: '',
description: ''
})
};
},
methods: {
slugify: function(text) {
return text
.toString()
.toLowerCase()
.normalize('NFD')
.trim()
.replace(/\s+/g, '-')
.replace(/[^\w\-]+/g, '')
.replace(/\-\-+/g, '-');
},
listingslug: function(text) {
document.getElementById("slug").value = this.slugify(text);
}
}
});
I have also included a similar slugify function from my custom.js file within the Vue component for testing purposes.
/**
* This is the slugify function, to allow us to slugify text
*/
function slugify(text) {
return text
.toString()
.toLowerCase()
.normalize('NFD')
.trim()
.replace(/\s+/g, '-')
.replace(/[^\w\-]+/g, '')
.replace(/\-\-+/g, '-');
}
As someone who is relatively new to Vue and still learning Javascript, I am encountering an issue where changing slugify(text) in the Vue template to this.slugify(text) resulted in an output of "object-keyboardevent". Any insights on what might be going wrong?