¿Cómo puedo colocar el mismo componente en una página varias veces? Tengo un componente de entrada que obtiene accesorios y hace algunas cosas. Necesito colocar más de una entrada en una página y pensé que solo podía copiar/pegar mi componente pero obtengo un error porque vue piensa que todos mis componentes son el mismo elemento dom. como los puedo poner
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">Имя</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>lo siento, no tengo un gran bagaje de conocimiento de vue y google no me dio la información necesaria que escribo en nuxt pero creo que es el mismo problema con vue
Esto es lo que debería ser
moveR(e) { e.target.classList.add('inputs__lable_r') }, Le faltaba un e.target , por lo tanto, no estaba apuntando al elemento HTML sino al evento.