Vue复制粘贴功能，Vue列表渲染答案

【问题标题】：Vue Copy Paste feature, Vue list renderingVue复制粘贴功能，Vue列表渲染
【发布时间】：2020-09-10 16:01:05
【问题描述】：

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

但它只复制索引为 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>

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

至少将项目本身传递给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");
    }

【讨论】：

非常感谢您对我的帮助。

【解决方案2】：

您在选择元素时有几个错误：

var textToCopy = document.querySelector(`.obj${this.items.indexOf(index)}`)

应该是这样的：

var textToCopy = document.querySelector(`.obj-${index}`)

obj 之后缺少连字符，并且由于您已经通过索引，因此无需使用 indexOf。

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

【讨论】：

非常感谢兄弟帮助我。爱你.../