Nuxt•6mo ago

UI not changing when ref variable changes

When I change the value of the variable, the UI doesn't change. After the function finishes executing, the variable resets to the state it was in before the function ran. I attached a watch() to the variable to check if something else was resetting it, and when the function executes the watch() never runs. I'm on Nuxt 3.11

1 Reply

EternalOP•6mo ago

Here's my code if you want to take a look

<script>
const showRobloxAccounts = ref(false);
function toggleRobloxAccounts() {
    showRobloxAccounts.value = !showRobloxAccounts.value;
}


const robloxAccount = ref<{ username: string, robloxId: number, profilePicture: string }>({
    username: "",
    robloxId: 0,
    profilePicture: ""
});
const reserveRobloxAccounts = ref<username: string, robloxId: number, profilePicture: string[]>([]);

function setActiveAccount(robloxId: number) {
    for (let i = 0; i < reserveRobloxAccounts.value.length; i++) {
        if (reserveRobloxAccounts.value[i].robloxId == robloxId) {
            const temp = reserveRobloxAccounts.value[i];
            reserveRobloxAccounts.value.splice(i, 1);
            console.log(robloxAccount.value)
            reserveRobloxAccounts.value.push(robloxAccount.value);
            robloxAccount.value = {
                username: temp.username,
                robloxId: temp.robloxId,
                profilePicture: temp.profilePicture,
            };
            console.log(robloxAccount.value)
            break;
        }
    }
}

watch(userDataStore, (data) => {
    robloxAccount.value = data.robloxAccount;
    reserveRobloxAccounts.value = data.reserveRobloxAccounts;
});

watch(robloxAccount, (data) => {
    console.log("hello world"); //this doesnt run after you change the robloxAccount variable in the setActiveAccount function. 
});
</script>

<script>
const showRobloxAccounts = ref(false);
function toggleRobloxAccounts() {
    showRobloxAccounts.value = !showRobloxAccounts.value;
}


const robloxAccount = ref<{ username: string, robloxId: number, profilePicture: string }>({
    username: "",
    robloxId: 0,
    profilePicture: ""
});
const reserveRobloxAccounts = ref<username: string, robloxId: number, profilePicture: string[]>([]);

function setActiveAccount(robloxId: number) {
    for (let i = 0; i < reserveRobloxAccounts.value.length; i++) {
        if (reserveRobloxAccounts.value[i].robloxId == robloxId) {
            const temp = reserveRobloxAccounts.value[i];
            reserveRobloxAccounts.value.splice(i, 1);
            console.log(robloxAccount.value)
            reserveRobloxAccounts.value.push(robloxAccount.value);
            robloxAccount.value = {
                username: temp.username,
                robloxId: temp.robloxId,
                profilePicture: temp.profilePicture,
            };
            console.log(robloxAccount.value)
            break;
        }
    }
}

watch(userDataStore, (data) => {
    robloxAccount.value = data.robloxAccount;
    reserveRobloxAccounts.value = data.reserveRobloxAccounts;
});

watch(robloxAccount, (data) => {
    console.log("hello world"); //this doesnt run after you change the robloxAccount variable in the setActiveAccount function. 
});
</script>

<template>
                <button @click="toggleRobloxAccounts" class="activeAccount">
                    <div class="wrapper">
                        <img :src="robloxAccount.profilePicture" :alt="robloxAccount.username" ref="robloxAccountImage">
                        <p ref="robloxAccountUsername">{{ robloxAccount.username }}</p>
                    </div>
                    <Icon name="fa-solid:chevron-down" />
                </button>
                <div v-show="showRobloxAccounts" class="reserveRobloxAccounts">
                    <button v-for="account in reserveRobloxAccounts" :key="account.robloxId"
                        @click="setActiveAccount(account.robloxId)">
                        <div class="wrapper">
                            <NuxtImg :src="account.profilePicture" :alt="account.username" format="avif"
                                draggable="false" />
                            <p>{{ account.username }}</p>
                        </div>
                    </button>
                </div>
</template>

<template>
                <button @click="toggleRobloxAccounts" class="activeAccount">
                    <div class="wrapper">
                        <img :src="robloxAccount.profilePicture" :alt="robloxAccount.username" ref="robloxAccountImage">
                        <p ref="robloxAccountUsername">{{ robloxAccount.username }}</p>
                    </div>
                    <Icon name="fa-solid:chevron-down" />
                </button>
                <div v-show="showRobloxAccounts" class="reserveRobloxAccounts">
                    <button v-for="account in reserveRobloxAccounts" :key="account.robloxId"
                        @click="setActiveAccount(account.robloxId)">
                        <div class="wrapper">
                            <NuxtImg :src="account.profilePicture" :alt="account.username" format="avif"
                                draggable="false" />
                            <p>{{ account.username }}</p>
                        </div>
                    </button>
                </div>
</template>

The userDataStore is a Pinia store

Gaming

Programming

UI not changing when ref variable changes