Adding attribute for conditionally rendering a component in VueJS

Question

In our frontend, we want to disable certain elements (i.e. buttons) depending on whether a user has "permissions" to trigger an action or not. To keep our code clean, we would like to do something like this:

<button reqPermission="edit">

This should call a JS method connecting to our permission service and Vue should only render the element / enable it if the request is truthy.

I don't have much clue of VueJS - what I would like to avoid though, is using something like v-if="...", since this would clutter our code. Any hints on how to implement such a "custom attribute" that influences the rendering of a component would be highly appreciated. What I found so far is https://forum.vuejs.org/t/how-to-conditionally-render-a-component/69687/6

The only way to not render an element/component is to use v-if. All the rest options (like v-show) will still render it in the dom. I could not understand why you want to avoid using v-if? — Noy Gafni
– Noy Gafni, Commented May 7, 2021 at 11:44
It sounds like your app is beyond the point of passing around props and needs a state store like Vuex — T J
– T J, Commented May 7, 2021 at 14:47
Did my answer solve your problem adequately or are you encountering issues? Please feel free to accept the answer or comment with further questions. — leonheess
– leonheess, Commented May 19, 2021 at 13:16

leonheess · Accepted Answer · 2021-07-28 08:54:57Z

If you want to disable it based on a boolean you can do this inside the Vue template syntax:

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

If you want to prevent rendering instead of disabling the button, use v-if instead of :disabled.

If the boolean has to be loaded from a backend, I'd recommend using a vuex store action to fetch the user rights and conditional rendering based on the store state:

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

Collectives™ on Stack Overflow

Adding attribute for conditionally rendering a component in VueJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related