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

Question

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

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

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

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

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

在第二次选择时，数组会更新:

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

等等... 最后，我在 items 数组上使用 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 无法检测数组项和对象属性的添加/删除。阅读Caveats Vue 指南的部分，它为您提供了一些有关如何解决该问题的想法。

它是这样说的:

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

1. 当您直接使用索引设置项目时，例如vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如vm.items.length = newLength

为了克服警告 1，以下两项都将实现与 vm.items[indexOfItem] = newValue 相同的效果，但也会触发 react 性系统中的状态更新:

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

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

要处理警告 2，您可以使用 splice:

example1.items.splice(newLength)