In order to better understand and clarify, I will break it down into smaller points.
First, I am able to highlight text using my mouse or trackpad. The highlighted text is then stored in an array of objects upon release of the mouse button. Each object within the array contains the selected text.
My goal is to loop through this array so that each selection can be displayed one after the other until different text is selected.
Essentially, every time a text is selected, it is stored in the selectionArray as a string inside an object. Therefore, selectionArray becomes an array of objects structured like this: Upon first selection,
[
{selectedText: '...string...'}
]
Upon second selection, the array gets updated:
[
{selectedText: '...string...'},
{selectedText: '...another string...'}
]
And so forth... To display the selections live, I loop through the items array which is equivalent to selectionArray with:
this.items = selectionArray
I have almost achieved the desired outcome, but there seems to be some missing piece as the modifications are not reflected live. It requires making unnecessary changes in the HTML to see the result. My suspicion lies on the created method, and I would appreciate any logical guidance for troubleshooting. Thank you.
Here is the provided code for reference:
<template>
<main class='wrapper'>
<section class='wrapper-copy'>
<div class='copy'>
<!-- Inserted Lorem Ipsum content -->
</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>