Our current setup involves a text input field with its value stored in Vuex, passed as props, and accessed through computed properties. Within the same Vuex store, we also have a selection range (an array of two numbers) that allows text in the input to be highlighted or selected.
Here is a simplified version of the code:
<template>
<input type="text" v-model="value" @select="selectionHandler" />
</template>
<script>
export default {
props: ['props'],
computed: {
value: function() {
return this.props.value // some string
},
selectionRange: {
get: function () { return this.props.selectionRange }, // [number, number]
set: function (range) { /* dispatch store action to update, which will update props */ }
}
},
methods: {
selectionHandler(e) {
this.selectionRange = [e.currentTarget.selectionStart, e.currentTarget.selectionEnd]
}
}
}
</script>
The objective here is to enable users to select or highlight text (from the store) and then update the store based on their selection. I am considering using setSelectionRange (docs). While I could potentially leverage refs and watchers from Vue.js, it may be more complex than necessary.