Vue 3：字段不更新值

Question

我有一个字段定义如下：

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

在我的设置中，我观察属性的值是否发生变化，如果发生变化，我将获得新值，例如 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,
    };
}

无论我如何尝试，字段中的 tradeSizeFactor 值都没有更新。它一直显示 0...

Answer 1

在下一行中，您错误地用文字覆盖了 ref：

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

tradeSizeFactor 是一个 ref，因此必须通过其 value 属性:

更改值

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

Vue 3：字段不更新值

Vue 3: Field is not updating value

vue.js

vuejs3