As I work on my Vue application, I have encountered a scenario involving an element with a data-range attribute defined as follows:
:data-range="form.appearence.height_min + '/7'"
The value of form.appearance.height_min is dependent on the user's selection from a dropdown menu.
After each selection change, I need to reevaluate the data-range and perform actions based on it.
// Example watcher in the Vue app
'form.appearence.xps':function(val, oldval){
this.$set(this.form.appearence, 'height_min', xps_map[val]);
this.$emit('xps-updated');
}
// Listener function in another script
this.options.vue.$on('xps-updated', function(){
this.options.vue.$nextTick(function(){
console.log($('#test5').data('range')) // The issue: this value remains unchanged
}.bind(this))
}.bind(this));
The problem lies in the fact that although the range value updates visually in the DOM, JavaScript consistently retrieves the initial value. For instance, if the original value was 3/7 and later changed to 5/7, calling $('#test5').data('range') will still return 3/7. Why does this discrepancy occur?