Weird issue with Vue / Javascript variables-CodePudding

I honestly don't even know how to search for this question (what search param to write) but either way its bit weird issue and I am desperate for help.

So I am trying to do something simple, event sends "form-change" and when it does, we set new value in "this.data" object. Fairly simple. I don't expect this.data to be reactive I just want to update it.

// Find our data object which we want to update/change
if (form.field.includes('.')) {

    let find = form.field.split('.'), level = this.data;
    for (let index = 0; index < find.length; index  ) {

        if (level[find[index]] !== undefined) {

            level = level[find[index]];

        } else {

            level = undefined;

        }

    }

    if (level !== undefined)
        level = setFieldData();

}

This is fairly simple, we have name of field "inspect.book" and when update comes (Event) we just use dots to split into multi tree and update "this.data.inspect.book" to new value. But it does not work. Value does not change.

But the value from actual this.data.inspect.book comes out just fine using:

console.log(level);

However, if I do this:

this.data[ form.field.split( '.' )[ 0 ] ][ form.field.split( '.' )[ 1 ] ] = setFieldData();

It works fine. So "reference" to variable does not work... how is this possible? Looks like a bug in javascript or is it something with vue/reactivity?

Does anyone have better idea how to get this to work?

CodePudding user response：

So you are trying to update form data using to notation ?

i would do something like that :

_update(fieldName, value) {
            // We split segments using dot notation (.)
            let segments = fieldName.split(".");

            // We get the last one
            let lastSegment = segments.pop();

            // We start with this.data as root
            let current = this.data

            if(current) {
                // We update current by going down each segment
                segments.forEach((segment) => {
                    current = current[segment];
                });

                // We update the last segment once we are down the correct depth
                current[lastSegment] = val;
            }
        },

if i take your example :

if (form.field.includes('.')) {

    let find = form.field.split('.'), level = this.data;
    for (let index = 0; index < find.length - 1; index  ) {

        if (level[find[index]] !== undefined) {

            level = level[find[index]];

        } else {

            level = undefined;

        }

    }

    if (level !== undefined)
        level[find.pop()] = setFieldData();

}

i replaced find.length by find.length - 1 and replaced level = setFieldData() by level[find.pop()] = setFieldData()

you should update the property of the object, without actually overriding the value, because if you override the value, the original value will not get updated.