避免javascript警告-在Vue js解决方案上实现

我的问题是，我不知道如何在代码中实现Vue.set和array.splice以避免Javascript警告

以下是我想做的：

我用鼠标或触摸板突出显示文本，在鼠标上突出显示的文本存储在一组对象上。每个对象都包含选定的文本

我希望在该数组上循环，以便能够一个接一个地显示所有选择，只要我选择不同的文本

基本上，我将每个选定的文本存储到selectionArray。每个selectedText都是对象中的字符串。因此，SelectionArray在第一次选择时成为如下对象的数组：

[
 {selectedText: '...string...'}
]

在第二个选择中，将更新阵列：

[
 {selectedText: '...string...'},
 {selectedText: '...another string...'}
]

等等。。。最后，我在items数组中使用v-on循环，该数组等于selectionArray，带有：

this.items = selectionArray

目前，我已经差不多做到了，但Vue无法检测到数组项和对象属性的添加/删除。Vue指南的一节对此进行了解释，但我不知道如何做，因为我对Vue js还很陌生。需要帮忙吗

代码如下：

<template>
  <main class='wrapper'>
    <section class='wrapper-copy'>
      <div class='copy'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis sequi dolorum soluta pariatur asperiores. Recusandae atque nesciunt ipsa velit impedit fugit enim, quia explicabo adipisci sunt earum laudantium illo. Tenetur.
Animi magnam corrupti atque mollitia eaque enim, voluptatum magni laboriosam vel possimus reprehenderit aut doloribus inventore repellat aliquam voluptatem esse ut saepe at iusto qui quibusdam doloremque exercitationem ipsam. Dicta.
In animi nobis accusamus nemo repellat dicta a repellendus provident accusantium fugit voluptas minus laudantium reiciendis cumque, amet porro maiores quisquam? Ullam aut voluptatem delectus cum rerum perferendis vero laudantium!
      </div>

    </section>
    <article class="wrapper-select">
      <div class="select">
        <div id='input'
             class='selected-copy'
             v-for='(item, index) in items' 
             :key='item.index'>
          <div class='index'>{{ index }} </div>
          <p class='selection'> {{ item.selectedText }} </p>
        </div>
      </div>
    </article>
  </main>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        items: []
      }
    },
    created () {
      var selectionArray = []
      function storeSelection () {
        var selectedText = window.getSelection().toString()
        if (selectedText.length && selectionArray.indexOf(selectedText) === -1) {
          selectionArray[selectionArray.length] = {selectedText}
        }
        console.log(selectionArray)
      }
      document.addEventListener('mouseup', storeSelection)
      this.items = selectionArray
      console.log(this.items)
    }
  }
</script>

我的同僚们都是精英。全方位解决方案。如果你不明白这一点，那么你就必须向我解释一下。特尼图尔。
动物的巨大腐败导致了动物的死亡，动物的巨大劳动能力导致了发明人或发明人的责任感，并导致了动物的死亡。格言。
在《阿尼米·阿尼莫·阿尼米·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·阿尼莫·？我们必须尊重所有人的尊严！
{{index}}
{{item.selectedText}
导出默认值{
名称：“应用程序”，
数据（）{
返回{
项目：[]
}
},
创建（）{
var selectionArray=[]
函数存储选择（）{
var selectedText=window.getSelection（）.toString（）
if（selectedText.length&&selectionaray.indexOf（selectedText）=-1）{
SelectionAry[SelectionAry.length]={selectedText}
}
console.log（selectionArray）
}
document.addEventListener（'mouseup'，storeSelection）
this.items=selectionArray
console.log（this.items）
}
}

在您提供的文档链接中，您应该更改添加数组元素的代码：

if (selectedText.length && selectionArray.indexOf(selectedText) === -1) {
     Vue.set(selectionArray, selectionArray.length, {selectedText});
}

顺便说一下，您的代码中有两个缺陷：

_

selectionArray[selectionArray.length]={selectedText}

应该抛出一个错误（除非有特殊的Vue语法我不知道），因为您需要一个属性id才能使对象有效（它应该是

selectionArray[selectionArray.length]={selectedText:selectedText}

）

_将这些文本存储为对象的问题是，这一行不起作用：

if（selectedText.length&&selectionArray.indexOf（selectedText）==-1）{

，因为数组元素不是文本，而是包含文本的对象。即使使用

indexOf（{selectedText:selectedText}）==-1

这将不起作用，因为对象的比较是在它们的引用上进行的，并且存储的对象和测试的对象具有不同的引用

结论：要使其工作，要么将文本存储在数组中，而不将其嵌入对象中，要么使用

findIndex

函数来查找元素，如下所示（我将查找函数与条件分离，以提高可读性）：

---

Kaddath非常感谢您非常精确的解释。您说得非常正确，这项工作非常完美！5*鼓掌鼓掌！不客气，我在这里经常看到Vue.js问题，我想“看看它”正如我们在我的国家所说；）从我所看到的来看，你已经走上了非常好的道路：）。我也开始学习Vue，它是如此的精巧和流畅。我打赌在未来6个月/1年内，它将是最著名的Js框架。再次感谢你的时间和帮助。非常感谢。

function findSelectedText(arr, text){
    return arr.findIndex(function(element){
        return element.selectedText === text;
    });
}
if (selectedText.length && findSelectedText(selectionArray, selectedText) === -1) {
     Vue.set(selectionArray, selectionArray.length, {selectedText: selectedText});
}