0

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 ??

enter image description here

I only post this image for the line numbers references

enter image description here

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...

code-8
  • 54,650
  • 106
  • 352
  • 604
  • The `console.log()` displays a *live reference* to the object. It's likely that `attribute_id` was changed from `25` to `null` after the log. You should stringify the object to capture a snapshot of the value at the time of the log: `console.log('this.ruleDetails[i] >>', JSON.stringify(this.ruleDetails[i]))` – tony19 Jun 06 '22 at 21:41

1 Answers1

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?

code-8
  • 54,650
  • 106
  • 352
  • 604
thurasw
  • 450
  • 2
  • 6
  • Turn out to be chrome console. I used this instead. `JSON.parse(JSON.stringify(c))` – code-8 Jun 07 '22 at 02:19
  • It's not necessarily a bug. The first line in console lets you see the actual output that was logged. (You can see it doesn't change). But chrome also lets you see a "live" version of the object, when you expand. You are creating a new copy of the object for console by doing `JSON.parse`. Please mark as solution if it helped. – thurasw Jun 07 '22 at 03:01