[Vuejs]-Setting input attributes with props and <script setup>

by

0👍

Read carefully the documentation on how to use props with <script setup>. The value of defineProps must be assigned, then props will be usable in your template.

const props = defineProps({
    InputType: String,
    InputId: String,
    InputLabel: String,
    InputPlaceholder: String,
})

<label :for="props.InputId">{{ props.InputLabel }}</label>
<div class="mt-2">
  <input :type="props.InputType" :id="props.InputId" v-bind:placeholder="props.InputPlaceholder">
</div>

Note: props can be automatically unwrapped in your template so InputId can be used instead of props.InputId. It is only strictly necessary if used elsewhere in <script setup>

👤yoduh

0👍

The child component should define the props with camelCase names inputLabel instead of InputLabel :

defineProps({
  inputType: String,
  inputId: String,
  inputLabel: String,
  inputPlaceholder: String
});

and they should be used in parent component like :

<Child input-label="somee label"/> or <Child inputLabel="somee label"/>

LIVE DEMO

👤Boussadjra Brahim

-1👍

You could use a prop "type" for rendering the input base on it.

<script setup>
const props = defineProps({
    type: {type: String, default: ''},
    formField: {type: Object, default: {}}
    }) 
<script>
    
<template>
    <div v-if="type === 'text'">
    </div>
    <div v-if="type === 'file'">
    </div>
    <div v-if="type === 'checkbox'">
    </div>
</template>
👤Crashh

-2👍

Basic solution.

Check also How to force a Vue component to re-render if you will need to reload your component.

const { createApp } = Vue

const MyInput = {
  props: ['type'],
  template: 'Type: {{type}} <br/> <input :type="type" />'  
}

const App = {  
  components: {
    MyInput
  },
  data() {
    return {
      type: 'text',
      types: ['text', 'radio', 'checkbox']
    }
  },
}

const app = createApp(App)
app.mount('#app')
#app { line-height: 1.75; }
[v-cloak] { display: none; }
 <div id="app" v-cloak>
  Type: <select v-model="type">
  <option v-for="t in types">{{t}}</option>
  </select><br/>
  <my-input :type="type"></my-input>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
👤Tolbxela

Leave a comment