Question

我想知道是否可以在组件内部重新渲染此v-if语句。

我正在通过Firebase管理功能启用/禁用用户帐户。目前，这是可行的，但是每当我禁用用户时，我必须刷新页面才能显示更新，我都可以手动刷新，但是想知道是否有一种方法可以通过反应来做到这一点？我尝试手动更新数组（UsersAuth包含Firebase中的所有用户，已禁用：true | false布尔值）。

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方法

  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功能（如果需要）

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

在您的enableUser方法中，this.usersAuth[index].disabled = true应该为this.usersAuth[index].disabled = false，以便您启用用户而不是禁用他们。

您可以阅读The Vue Instance和Reactivity in Depth，以了解有关Vue如何实现保密性的更多信息。

创建Vue实例时，它将添加在以下位置找到的所有属性其数据对象指向Vue的反应系统。当那些值属性更改后，视图将“反应”，更新以匹配新值。

请注意，如果disabled是true或false，则可以将代码简化为：

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

反应性更新vue.js中的V-if

1 个答案: