Question

在我们的前端，我们希望根据用户是否具有触发操作的“权限”来禁用某些元素（即按钮）。为了保持我们的代码干净，我们想做这样的事情：

<button reqPermission="edit">

这应该调用一个连接到我们的权限服务的 JS 方法，如果请求是真实的，Vue 应该只呈现/启用它。

我对 VueJS 没有太多线索——不过我想避免使用类似 v-if="..." 的东西，因为这会使我们的代码变得混乱。任何有关如何实现影响组件呈现的“自定义属性”的提示都将受到高度赞赏。到目前为止我发现的是 https://forum.vuejs.org/t/how-to-conditionally-render-a-component/69687/6

Answer 1

如果您想根据布尔值禁用它，您可以在 Vue 模板语法中执行此操作：

<button :disabled="!userRights.edit">

如果您想阻止呈现而不是禁用按钮，请使用 v-if 而不是 :disabled。

如果必须从后端加载布尔值，我建议使用 vuex 存储操作根据存储状态获取用户权限和条件渲染：

<template>
  <button :disabled="!isLoading && !userRights.edit">
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'buttonComponent',
  computed: {
    ...mapState('userModule', ['isLoading', 'userRights']),
  },
  created() {
    this.$store.dispatch('userModule/getRights')
  },
}
</script>

export default {
  namespaced: true,
  state: {
    isLoading: false,
    userRights: {
      edit: false,
      view: false,
    },
  },
  mutations: {
    updateIsLoading(state, isLoading) {
      state.isLoading = isLoading
    },
    updateUserRights(state, userRights) {
      state.userRights = userRights
    },
  },
  actions: {
    async getRights() {
      this.commit('userModule/updateIsLoading', true)

      const user = await getCurrentUserID()
      const rights = await getRightsByUser(user) // backend call

      this.commit('userModule/updateUserRights', rights)
      this.commit('userModule/updateIsLoading', false)
    },
  },
}

添加用于在 VueJS 中条件渲染组件的属性

1 个答案: