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

Question

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

这是我想要做的：

我用鼠标或触控板突出显示文本，并且在 mouseup 上突出显示的文本存储在对象数组中。每个对象都包含选定的文本。

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

基本上，我将每个选定的文本存储到 selectionArray。每个 selectedText 都是对象内的字符串。所以 SelectionArray 变成了这样的对象数组在第一次选择时：

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

在第二次选择时，数组被更新：

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

等等...最后，我在等于 selectionArray 的 items 数组上使用 v-on 循环：

this.items = selectionArray

目前我快到了，但 Vue 无法检测到数组项和对象属性的添加/删除。 Caveats 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>

Answer 1

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

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 函数来查找您的元素，就像这样（我将查找函数与条件分开以提高可读性） ：

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});
}