CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.js
Sandex
Sandex

Reputation: 117

Add one component multiply times on one page

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 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>

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

Upvotes: 1

Views: 125

Answers (1)

kissu
kissu

Reputation: 46696

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.

Upvotes: 1

Related Questions