响应式更新 vuejs 中的 V-if答案

【问题标题】：Update V-if in vuejs reactively响应式更新 vuejs 中的 V-if
【发布时间】：2020-09-04 09:42:52
【问题描述】：

我想知道是否可以在我的组件中重新呈现这个 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)
  }
});

【问题讨论】：

所以，即使手动设置服务器端更改（使用 this.usersAuth[index].disabled = true，我也不能使用 VueJs 反应性来更新 Dom？
在enableUser 中的this.usersAuth[index].disabled = true 不应该是this.usersAuth[index].disabled = false吗？
天哪，我是个白痴，现在可以了！泰
也建议你阅读这篇关于 forceRendering michaelnthiessen.com/force-re-render 的帖子，当你觉得你正在破坏反应性时，尝试重写来解决问题，你可能会感到困惑并使用不适当的解决方案来解决它。

标签： javascript vue.js

【解决方案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>

【讨论】：