Question

我的问题是我没有得到如何在我的代码上实现Vue.set和array.splice以避免Javascript警告。

以下是我要做的事情：

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

我希望循环使用该数组，只要我选择不同的文本，就可以逐个显示所有选择。

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

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

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

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

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

this.items = selectionArray

目前我几乎就在那里，但Vue无法检测数组项和对象属性的添加/删除。 Vue指南的Caveats部分对其进行了解释，但由于我对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来使对象有效（它应该是{{1} }）

_将这些文本存储为对象的问题是这条线不能工作：selectionArray[selectionArray.length] = {selectedText: selectedText}，因为数组元素不是文本，而是带有文本的对象。即使使用if (selectedText.length && selectionArray.indexOf(selectedText) === -1) {它也不会起作用，因为对象的比较是在它们的引用上进行的，并且存储的对象和被测对象具有不同的引用。

结论：要使其工作，要么将文本存储在数组中而不将其嵌入到对象中，要么使用indexOf({selectedText: selectedText}) === -1函数来查找元素，就像这样（我将查找函数与条件分开以获得更多可读性）：

findIndex

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

1 个答案: