Reactive Object is not updating on template Vue3 Composition API

Question

I'm struggling with this for a few days, maybe you could help me. I'm trying to fetch data from firebase (saved in state.state.memory and display it on my template. My variable saved updates on console, but template doesn't shows anything. I tried everything but I can't get anything on the template, could you explain?

Thanks!!

template

<template>
  <div class="memory" id="memory">
    Memory
    <div class="elementos-memoria" v-for="item in saved" :key="item">
      {{ item.primero + item.operador + item.segundo + ' = ' + item.resultado }}
    </div>
    <div class="elementos-memoria" v-for="cuenta in cuentas" :key="cuenta">
      {{ cuenta }}
    </div>
  </div>
</template>

script

import M from "materialize-css";
import { inject, reactive, watch } from "vue";

export default {
  props: {
    cuentas: Array,
  },
  setup() {
    const state = inject("store");
    let saved = reactive({});
    watch(
      () => state.state.memory,
      () => {
        saved = state.state.memory;
        console.log(saved);
      }
    );

    setInterval(() => console.log(saved), 1000);

    return {
      saved,
    };
  },
  mounted() {
    M.AutoInit();
  },
};

Auth.js File

const state = reactive({
    user: {},
    memory: {},
})

const login = (email, password) => {
    let memory = []
    auth.signInWithEmailAndPassword(email, password).then((data) => {
        state.user = data.user
        db.collection('users').doc(state.user.uid).collection('operaciones').get().then((queryResult) => {
            queryResult.forEach(doc => {
                memory.push(doc.data())
            })
            state.memory = memory
        }).catch(err => console.log(err))
    })
}

const signIn = (email, password) => {
    auth.createUserWithEmailAndPassword(email, password).then(cred => {
        state.user = cred.user;
    })
}


const logout = () => {
    auth.signOut().then(() => {
        state.user = null;
        state.memory = null;
    })
}

Daniel · Accepted Answer · 2021-10-13 14:23:28Z

7

Looks like you're replacing the reactive state value instead of mutating it

saved = state.state.memory; will replace it.

not sure what's in the state.state.memory object (assuming it is an object), but you can use Object.assign to dynamically update:

if (state.state.memory) {
  Object.assign(saved, state.state.memory)
}

edited Oct 13, 2021 at 14:23

answered Jun 14, 2021 at 19:29

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Patricio Cabo Over a year ago

and why replacing it doesn't work? saved object should be identical to state.state.memory. I updated the code with state.state.memory information, thanks. I resolved it defining saved as array instead of an object but I would like to know what i'm doing wrong

Daniel Over a year ago

because the object created during reactive({}); is not a regulat object but a Proxy , so when you re-assign it, the reactivity gets lost

Daniel Over a year ago

You could even try using a ref, which you can re-assign that one by using .value however that won't watch for mutations within the object.

Collectives™ on Stack Overflow

Reactive Object is not updating on template Vue3 Composition API

template

script

Auth.js File

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

template

script

Auth.js File

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related