在一个页面上多次添加一个组件

Question

如何在一页上多次放置相同的组件？我有输入组件，可以获取道具并做一些事情。我需要在一页中放置多个输入，我认为我可以只 copy/paste 我的组件，但我收到错误，因为 vue 认为我的所有组件都是相同的 dom 元素。我该如何放置它们？

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>

我很抱歉，我对 Vue 的了解不多，而且 google 没有提供我需要的信息我在 nuxt 上写，但我认为它与 vue

有同样的问题

Answer 1

这是应该的

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

您遗漏了一个 e.target，因此它不是针对 HTML 元素而是事件。

在一个页面上多次添加一个组件

Add one component multiply times on one page

javascript

vue.js

vuejs2

nuxt.js