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

Question

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

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

• 我希望在该数组上循环播放，以便能够一一显示所有选择，只要我选择其他文本即可。

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

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

在第二个选择中，将更新数组：

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

依此类推...最后，我在项目数组上使用v-on循环，该数组等于selectionArray，其内容如下：

this.items = selectionArray

目前，我快到了，但是缺少一些东西，因为我看不到实时的修改，因此必须对HTML（奇怪的）进行无用的修改，才能看到结果。我怀疑创建的方法，但至少需要一种逻辑上的调查方法，我需要帮助。谢谢

这是代码：

<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指南的“ 警告”部分，其中提供了一些有关如何解决该问题的想法。

它说的是：

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

1. 当直接使用索引设置项目时，例如vm.items [indexOfItem] = newValue
2. 修改数组的长度时，例如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)