Update V-if in vuejs reactively

Question

I was wondering if it's possible to re-render this v-if statement inside my component.

I am enabling/disabling a user account through firebase admin functions. This currently works, however whenever I disable a user I have to refresh the page in order to show updates, I can manually refresh, but wondered if there is a way to do this with reactivity? I've tried to update the array manually (UsersAuth contains all the users from Firebase, with the disabled: true|false boolean).

html

<span v-if="usersAuth[index].disabled === true"> <button type="button" v-on:click="enableUser(user.id, index)" class="btn btn-success">Enable</button></span>
<span v-if="usersAuth[index].disabled === false"><button type="button" v-on:click="disableUser(user.id)" class="btn btn-primary">Disable</button></span>

VueJS Methods

  data () {
    return {
      users: [],
      user: null,
      usersAuth: null,
      selecteduser: null
    }
  },
 created () {
    // call all users from the firebase store.
    const addMessage = firebase.functions().httpsCallable('listAllUsers')
    addMessage()
      .then(result => {
        this.usersAuth = result.data.users
      })

    firebase.auth().onAuthStateChanged((user) => {
      this.user = user
    })

    this.users = []
    firebase
      .firestore()
      .collection('roles')
      .get()
      .then(snap => {
        snap.forEach(doc => {
          const user = doc.data()
          console.log(doc.data())
          user.id = doc.id
          this.users.push(user)
        })
      })
    // get the users' enabled status
  },
   disableUser (uid) {
      const addMessage = firebase.functions().httpsCallable('disableUser')
      const data = { uid: uid }
      addMessage(data)
        .then((result) => {
          if (result === true) {
            console.log(this.userAuth)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    enableUser (uid, index) {
      const addMessage = firebase.functions().httpsCallable('enableUser')
      const data = { uid: uid }
      addMessage(data)
        .then((result) => {
           this.usersAuth[index].disabled = true
        })
        .catch(function (error) {
          console.log(error)
        })
    },

listAllUsers () {
      const addMessage = firebase.functions().httpsCallable('listAllUsers')
      addMessage()
        .then((result) => {
          console.log(result)
        })
        .catch(function (error) {
          console.log(error)
        })
    }

Firebase function (if you require this)

exports.disableUser = functions.https.onCall(async (data, context) => {

  if (!context.auth.token.superadmin) return
  try {
    listUsers = admin.auth().updateUser(data.uid, {
      disabled: true
    })

    .then(function() {
      console.log("Successfully disabled user " + data.uid);
      })

    return true
  } catch (error) {
    console.log(error)
  }

});

exports.enableUser = functions.https.onCall(async (data, context) => {

  if (!context.auth.token.superadmin) return
  try {
    listUsers = admin.auth().updateUser(data.uid, {
      disabled: false
    })

    .then(function() {
      console.log("Successfully disabled user " + data.uid);
      })

    return true
  } catch (error) {
    console.log(error)
  }

});

exports.listAllUsers = functions.https.onCall((data, context) => {

  if (!context.auth.token.superadmin) return

  try {
  return admin.auth().listUsers()
  } catch (error) {
    console.log(error)
  }
});

Answer 1

In your enableUser method, this.usersAuth[index].disabled = true should be this.usersAuth[index].disabled = false, so that you're enabling the user rather than disabling them.

You can read The Vue Instance and Reactivity in Depth for more information about how reacitivty works with Vue.

When a Vue instance is created, it adds all the properties found in its data object to Vue’s reactivity system. When the values of those properties change, the view will “react”, updating to match the new values.

On a side note, if disabled is either true or false, you can simplify your code to:

<span v-if="usersAuth[index].disabled"> and <span v-else>