I'm struggling to articulate this question clearly, and the documentation isn't providing the answers I need.
Essentially, in my dataset, I have an array with two values that represent the day of the week index. I want to create a custom range component with added functionalities. For instance, my range slider will have two handles, although I haven't styled them yet.
Vue.component('range', {
props: [ 'step', 'min', 'max', 'value' ],
created() {
this.minValue = this.value[0];
this.maxValue = this.value[1];
},
data: function() {
return {
minValue: 0,
maxValue: 0
}
},
template: `<div>
<input type="range" name="points" :min="this.min" :max="this.max" :step="this.step" :value="minValue">
<input type="range" name="points" :min="this.min" :max="this.max" :step="this.step" :value="maxValue">
</div>`
});
window.app = new Vue({
el: '#app',
data: {
'weekdays': [ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday' ],
'locations': [
{
'id': 1,
'name': 'Test Place',
'hours': [
{
'id': 1,
'weekdays': [ 0, 4 ]
},
{
'id': 2,
'weekdays': [ 5, 5 ]
},
{
'id': 3,
'weekdays': [ 6, 6 ]
}
]
}
]
}
});<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div class="location" v-for="(location, index) in locations">
<h3>{{ location.name }}: {{ location.id }}</h3>
<div class="hours">
<div v-for="(hour, index) in location.hours">
<p>Hour ID: {{ hour.id }}</p>
<range step="1" min="0" max="6" :value="hour.weekdays"></range>
</div>
</div>
</div>
</div>The example above represents my current progress. My question now is whether there's a way to utilize v-model without having to emit the data back to the parent component. Is it possible to update the array based on the values from the sliders within the main component?
For example:
<range step="1" min="0" max="6" :value="hour.weekdays" v-modal="hour.weekdays"></range>