我的问题是我没有在代码上实现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>
最佳答案
在提供的文档链接中，应将添加数组元素的代码更改为：
if (selectedText.length && selectionArray.indexOf(selectedText) === -1) {
Vue.set(selectionArray, selectionArray.length, {selectedText});
}
顺便说一下，您的代码中有2个缺陷：
_
selectionArray[selectionArray.length] = {selectedText}应该引发错误（除非有我不知道的特殊Vue语法），因为您需要使该对象有效的属性ID（应该为selectionArray[selectionArray.length] = {selectedText: selectedText}）_将这些文本存储为对象的问题是该行不起作用：
if (selectedText.length && selectionArray.indexOf(selectedText) === -1) {，因为数组元素不是文本，而是其中包含文本的对象。即使使用indexOf({selectedText: selectedText}) === -1也不起作用，因为对象的比较是根据它们的引用进行的，并且存储的对象和经过测试的对象具有不同的引用。结论：要使其工作，可以将文本存储在数组中而不将其嵌入对象中，或者使用
findIndex函数来查找您的元素，例如这样（我将find函数与条件分开以提高可读性）：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});
}