CODEWITHSUNDEEP
vue.jsvuejs3
Guy Hagemans
Guy Hagemans

Reputation: 510

Vue 3: Field is not updating value

I have a field defined as follows:

<Field
class="form-control form-control-solid"
:value="tradeSizeFactor"
name="tradeSizeFactor"
:v-model="tradeSizeFactor"
/>

In my setup I watch if the value of property changed and if so I get the new value for for example the tradeSizeFactor:

setup(props)
{
    const copyAccountId = ref(props.copyAccountId);
    const copyAccountName = ref(props.copyAccountName);
    let tradeSizeFactor = ref(0);
    watchEffect(() => {
        console.log(`watch Effect id: ${props.copyAccountId}`);
        console.log(`watch Effect name: ${props.copyAccountName}`);

        copyAccountId.value = props.copyAccountId;
        if (props.copyAccountId !== 0) {
            getSettings(props.copyAccountId);
        }
    });

    async function getSettings(copyAccountId) {
        store
            .dispatch(Actions.GET_COPYACCOUNTSETTINGS, copyAccountId)
            .then((data) => {
                console.log(
                    `data: ${JSON.stringify(data.data.settings.tradeSizeFactor)}`
                );
                Object.assign(copyAccountSettings.value, data.data.settings);
                tradeSizeFactor = data.data.settings.tradeSizeFactor;
            });
    }

    return {
        tradeSizeFactor,
    };
}

Whatever I try however, the value of tradeSizeFactor is not updating in the Field. It keeps showing 0...

Upvotes: 0

Views: 2488

Answers (1)

tony19
tony19

Reputation: 138276

In the following line, you're incorrectly overwriting the ref with a literal:

tradeSizeFactor = data.data.settings.tradeSizeFactor;
^^^^^^^^^^^^^^^

tradeSizeFactor is a ref, so the value must be changed via its value property:

tradeSizeFactor.value = data.data.settings.tradeSizeFactor;
                  👆

Upvotes: 3

Related Questions