Vue is not rendering on right tags component-CodePudding

The way i am defining my props;

<template>
  <div>
    <vinput id="login_name" label="Phone number"></vinput>

            <div >
                <label for="email-phone">School slug</label>
                <input type="text" id="email-phone" >
            </div>
  </div>
</template>


<script>
import vinput from '../../components/Input.vue'

export default {
  components:{
    vinput
  }
}
</script>

The way i am passing the props

<vinput id="login_name" label="Phone number"></vinput>

Please why is the browser rendering it this way:

<div >
<div  id="login_name" label="Phone number">
<label></label>
  <input type="tex" >
 </div>
<div ><label for="email-phone">School slug</label><input type="text" 
id="email-phone" ></div></div>

I was expecting interpolation in the label and input not in the div

====Edited==== vinput component

<template>
  <div >
    <label :for="id">{{ label }}</label>
    <input :type="type ? type : 'tex'" 
    : />
  </div>
</template>

<script>
export default {
  data(){
    return {
      props:['label', 'id','type', 'classes']
    }
  }
}
</script>

CodePudding user response：

Move your props:['label', 'id','type', 'classes'] away from data.

Those are totally different things.

<script>
export default {
  props: ['label', 'id','type', 'classes'],
  data(){
    return {};
  },
};
</script>