I recently started working with vuejs and decided to create custom components for elements like buttons, links, inputs, etc. Here is an example of my input component-
<template>
<div class="position-relative">
<input
:class="[{ 'pe-5': type === 'password' }, 'form-control p-2 rounded-3']"
:type="inputType"
:id="label ? slugify(label) : null"
v-model="inputValue"
v-bind="$attrs"
/>
<CustomButton
type="button"
transparent
class="position-absolute end-0 top-50 translate-y--50"
v-if="type === 'password'"
@click="togglePasswordVisibility"
>
<RemixIcon :icon="showPassword ? 'eye-off-line' : 'eye-line'" />
</CustomButton>
</div>
</template>
<script>
import RemixIcon from '../components/RemixIcon.vue';
import CustomButton from '../components/CustomButton.vue';
export default {
components: {
RemixIcon,
CustomButton
},
props: {
type: {
type: String,
default: 'text',
},
label: {
type: String,
default: '',
},
},
data() {
return {
inputValue: '',
showPassword: false,
};
},
computed: {
inputType() {
return this.showPassword ? 'text' : this.type;
},
},
methods: {
togglePasswordVisibility() {
this.showPassword = !this.showPassword;
},
slugify(str) {
return str
.toLowerCase()
.trim()
.replace(/[^\w\s-]/g, '')
.replace(/[\s_-]+/g, '-')
.replace(/^-+|-+$/g, '');
},
},
};
</script>
<style scoped></style>
Unfortunately, when I try to use v-model on it, It doesn't seem to work properly
<TextInput type="text" v-model="user_name" />
In this scenario, the user_name has a default value but does not display in the input field.
I am determined to figure out how to make v-model work with this input and ensure its functionality.
I have searched online and even consulted AI tools, but nothing seems to solve the issue for me.