Is there a way to add the same component multiple times on one page? I have an input component that receives props and performs certain functions. I need to include more than one instance of this input component on a single page, but when I try to copy and paste the component, Vue interprets them as the same DOM element. How can I properly include multiple instances of the input component?
index.vue
<template>
<div class="container">
<Input name="name" />
<Input name="surname" />
<Input name="pass" />
</div>
</template>
Input.vue
<template>
<div class="inputs">
<label class="inputs__label" :for="name">Name</label>
<input
v-click-outside="moveR"
class="inputs__input"
:name="name"
type="text"
@click="moveL($event.target)"
/>
</div>
</template>
<script>
import vClickOutside from 'v-click-outside'
export default {
directives: {
clickOutside: vClickOutside.directive,
},
props: ['name'],
methods: {
moveR(e) {
console.log(e)
e.classList.add('inputs__lable_r')
},
moveL(e) {
console.log(e)
e.classList.remove('inputs__lable_r')
},
},
}
</script>
I apologize for my limited knowledge of Vue and the lack of helpful information online. I am using Nuxt, but I believe this issue is common with Vue as well.