This content originally appeared on DEV Community and was authored by Niyongabo Aristide
Reusable InputField Component
Create InputField component
<template>
<input
:placeholder="placeholder"
:type="type"
:required="required"
:value="value"
@input="$emit('update:value', $event.target.value)">
</template>
<script>
export default {
props:{
type: {
type: String,
default: 'text'
},
value: {
type: String,
required: true
},
placeholder: {
type: String,
default: ''
},
required: {
type: Boolean,
default: false
}
},
name: "InputField"
}
</script>
Using Reusable InputField
<template>
<InputField
type="password"
:value="value"
:required="true"
@update:value="(newValue) => (valye = newValue)"/>
</template>
<script>
import InputField from "../../components/resusable/InputField.vue"
export default {
components:{
InputField
},
data(){
return {
value: ""
}
},
}
</script>
This content originally appeared on DEV Community and was authored by Niyongabo Aristide
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Niyongabo Aristide | Sciencx (2023-04-19T14:47:18+00:00) Reusable Input Field in vue.js. Retrieved from https://www.scien.cx/2023/04/19/reusable-input-field-in-vue-js/
" » Reusable Input Field in vue.js." Niyongabo Aristide | Sciencx - Wednesday April 19, 2023, https://www.scien.cx/2023/04/19/reusable-input-field-in-vue-js/
HARVARDNiyongabo Aristide | Sciencx Wednesday April 19, 2023 » Reusable Input Field in vue.js., viewed ,<https://www.scien.cx/2023/04/19/reusable-input-field-in-vue-js/>
VANCOUVERNiyongabo Aristide | Sciencx - » Reusable Input Field in vue.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/19/reusable-input-field-in-vue-js/
CHICAGO" » Reusable Input Field in vue.js." Niyongabo Aristide | Sciencx - Accessed . https://www.scien.cx/2023/04/19/reusable-input-field-in-vue-js/
IEEE" » Reusable Input Field in vue.js." Niyongabo Aristide | Sciencx [Online]. Available: https://www.scien.cx/2023/04/19/reusable-input-field-in-vue-js/. [Accessed: ]
rf:citation » Reusable Input Field in vue.js | Niyongabo Aristide | Sciencx | https://www.scien.cx/2023/04/19/reusable-input-field-in-vue-js/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.