添加用于在VueJS中有条件地呈现组件的属性

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