How can I debug why my array of objects have inconsistent values? - vue.js

Question

I'm new to Vue.js v2. This is my first project. I have no idea what caused this issue, but I can't explain why my values changed when they're 6 lines apart. Hint 966 & 972
If line 966 returns null, why 972 returns 25 ??
I only post this image for the line numbers references
storeRule() {
this.$refs.form.validate()
if (this.$refs.form.validate()) {
let conditions = []
for (var i = 0; i < this.ruleDetails.length; i++) {
let c = this.ruleDetails[i]
// NEVER REMOVE THIS DEBUG STATEMENT
console.log('%c ', 'background: linear-gradient(45deg, red, yellow, orange)')
console.log('this.ruleDetails[i] >>', this.ruleDetails[i])
console.log('%c ________________________________________________________________', 'background: linear-gradient(45deg, red, pink, white, pink, red)')
// NEVER REMOVE THIS DEBUG STATEMENT
if (c.attribute_id != '' && c.attribute_id != null) {
console.log('..........................NEW..........................')
console.log('c.attribute_id', c.attribute_id) //will run ...
let condition = this.mapCondition(c)
if (c.attribute_id == 22 && c.operator_id == 21) {
var submitValue = []
c.value.sort()
if (c.value.length > 1) {
for (var j = 0; j < c.value.length; j++) {
submitValue.push(c.value[j])
}
}
condition.value = submitValue.join(', ')
}
conditions.push(condition)
}
}
let currentPriority = this.rules.length + 1
var rule = {}
rule.name = this.ruleName
rule.priority = currentPriority
if (this.urlType == 'Multi') {
rule.group_id = this.userGroup.id
rule.group_name = this.userGroup.name
} else {
rule.url = this.url
}
rule.details = conditions
this.rules.push(rule)
if (this.rules.length > 0) {
this.submit = true
}
this.showAddRule = false
this.alert = true
this.alertColor = 'green'
this.alertMessage = this.ruleName + ' - created !'
this.$refs.form3.reset()
}
},
HTML
<v-row v-for="(rule, index) in ruleDetails" :key="`ruleDetails-${index}`">
<v-col md="4">
<v-select dense outlined item-text="name" item-value="id" label="Attribute" :items="attributes" v-model="rule.attribute_id" #change="changeAttribute(index, rule.attribute_id)"></v-select>
</v-col>
<v-col md="3">
<v-select outlined dense item-text="name" item-value="id" label="Operator" v-model="rule.operator_id" :items="rule.operators" #change="changeOperator(index, rule.attribute_id, rule.operator_id)"></v-select>
</v-col>
<v-col md="4">
<!-- ---------
/// ruleDetails
--------- -->
{{ rule.attribute_id }}
<v-row v-if="locationIds.includes(rule.attribute_id)">
<v-col md="4" v-if="rule.attribute_id == 34">
<v-combobox :items="radiuses" v-model="rule.value[index].value_param" label="Radius" dense outlined></v-combobox>
</v-col>
<v-col md="8">
<v-combobox :items="locations" item-text="value_alias" item-value="value" return-object v-model="rule.value[index].value" :label="`Name (${locations.length})`" dense outlined append-outer-icon="delete" #click:append-outer="removeRuleDetail(index)" #change="getLocations(index, rule, rule.attribute_id)"></v-combobox>
</v-col>
</v-row>
</v-row>
Updated
I thought I got hit by one of this 🐞
I even tried
this.$forceUpdate()
Same result... I see attribute_id = null, but in the next 6 lines, it's 25 🤯
It makes no sense to me...

Answer 1

Try to use this instead
JSON.parse(JSON.stringify(var))
Full disclosure... I've never used vue.js in my life. But I believe this is just how Javascript objects work. Just because attribute_id shows as null inside the object doesn't mean it was null when the code was running. It doesn't mean it was changed within those 6 lines either.
Simplified example. But you can see the value in console reflects the change that was made after console.log.
Might be a bug in chrome?