Question

我将逐点解释，因为它可能是一个安静的复合体。

我用鼠标或触控板突出显示文本，在鼠标上突出显示的文本存储在一个对象数组中。每个对象都包含所选文本。
我希望在该数组上循环，只要我选择不同的文本，就可以逐个显示所有选择。

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

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

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

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

依旧...... 最后，我循环使用v-on on items数组，它等于selectionArray 用：

this.items = selectionArray

目前我几乎在那里，但由于我没有看到现场修改，我必须对HTML进行无用的修改（怪异），例如为了能够看到结果。我怀疑创建的方法，但我需要帮助，至少是一种逻辑的调查方式。 THX

以下是代码：

<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

Vue无法检测数组项和对象属性的添加/删除。阅读Vue指南的Caveats部分，它会为您提供有关如何解决该问题的一些想法。

以下是它的说法：

由于JavaScript的限制，Vue无法检测到对数组的以下更改：

直接设置带索引的项目时，例如vm.items [indexOfItem] = newValue
修改数组的长度时，例如： vm.items.length = newLength

为了克服警告1，以下两个将完成与vm.items [indexOfItem] = newValue相同的操作，但也会在反应系统中触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

要处理警告2，您可以使用拼接：

example1.items.splice(newLength)

v-for循环项目不能立即在Vue中更新

1 个答案: