时间戳

首页 > 解决方案 > Vue复制粘贴功能，Vue列表渲染

javascript - Vue复制粘贴功能，Vue列表渲染

问题描述

当我在输入字段中输入一些文本然后点击输入时，将其添加到列表中，并带有一个标题为“复制”的按钮现在我想要当我单击下一个输入时复制该输入。

但它只复制索引为 1 的元素

你可以运行这段代码

请检查一下，让我知道有什么问题

谢谢

new Vue({
  el: "#app",
  data: {
      myInput: '',
      items: []
  },
  methods: {
    AddNew() {
      this.items.push(this.myInput)
      this.myInput= ""
    },
    copyText(index) {
      console.log('1 =',this.items[index])
      var textToCopy = document.querySelector(`.obj${this.items.indexOf(index)}`)
      console.log( '2 =', textToCopy);
      textToCopy.select()
      document.execCommand("copy");
    }
  }
})
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <div id="app">
    <input type="text" v-on:keyup.enter="AddNew" v-model="myInput">
    <div v-for="(item, index) in items" :key="index">
      <input :class="['obj-' + index]" :value="item"> {{index}}
      <button v-on:click=" copyText(index)">copy</button>
    </div>
  </div>

标签： javascriptvue.jsvuejs2vue-component

解决方案

您修改了一个数组，因此使用索引作为键并查找要复制的项目是不可靠的。

至少将项目本身传递给 copyText 方法：

<div v-for="(item, index) in items" :key="index">
      <input :class="['obj-' + index]" :value="item"> {{index}}
      <button v-on:click="copyText(item)">copy</button>
</div>
...
copyText(item) {
      console.log('1 =',item)
      var textToCopy = document.querySelector(`.obj${item}`)
      console.log( '2 =', textToCopy);
      textToCopy.select()
      document.execCommand("copy");
    }

推荐阅读