Add one component multiply times on one page-CodePudding

How can I place same component on one page multiply times? I have input component who get props and do some stuff. I need to place more than one inputs in one page and i thought i can just copy/paste my component but i get error because vue is thinking that all of my components are the same dom element. how can I put them?

index.vue

<template>
  <div >
    <Input name="name" />
    <Input name="surname" />
    <Input name="pass" />
  </div>
</template>

Input.vue

<template>
  <div >
    <label  :for="name">Имя</label>
    <input
      v-click-outside="moveR"
      
      :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>

iam sorry i dont have a big baggage of knowledge of vue and google doesnt gave me needed information i write on nuxt but i think its same trouble with vue

CodePudding user response：

This is what it should be

moveR(e) {
  e.target.classList.add('inputs__lable_r')
},

You were missing a e.target, hence it was not targeting the HTML element but rather the event.