Reusable Input Field in vue.js

Reusable InputField Component

Create InputField component

<template>
<input
:placeholder=”placeholder”
:type=”type”
:required=”required”
:value=”value”
@input=”$emit(‘update:…


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
APA

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/

MLA
" » 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/
HARVARD
Niyongabo 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/>
VANCOUVER
Niyongabo 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.

You must be logged in to translate posts. Please log in or register.