Question

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

2021-05-07

235

javascript vue.js

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

<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']),
  },
  mounted() {
    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)
    },
  },
}