You must specify a value in the directive

[D S]

im using the package as the docs says but i have a problem ... when i add the directive to my menu with vuetify i've a custom menu drawer file with a json to add my menu dinamycally like this

{ text: "Planeación Estrategica", path: "/goals", allowedRoles: "root|rector|directivo", icon: { type: "feather", name: "check-square", stroke: "white", fill: "none" } },

i use this menu like this

<v-list-item v-else :key="item.text" link :to="item.path" v-role:any="item.allowedRoles" >

when i add :v-role:any="item.allowedRoles" it doesnt work but when i remove the : from :v-role it works with this error You must specify a value in the directive

[D S]

Any update about this issue¡?

[John Cruz]

I tried:

Script

data() {
  return {
    items: [
      {
        role: 'admin',
      },
      {
        role: 'member',
      }
    ],
  }
},
created() {
  this.$laravel.setPermissions(['add articles', 'edit articles']);
  this.$laravel.setRoles(['admin', 'user', 'writer']);

  setTimeout(() => {
    this.items.push({
      role: 'writer',
    });
  }, 5000);
},

Template

<section>
  <div v-for="item in items" :key="item.role">
    <p v-role:any="item.role">
      {{ item.role }}
    </p>
  </div>
</section>

It works!

[D S]

so, first i need to initialize empty my roles array and then add the new roles from my api ?

[John Cruz]

I think I got confused, is the problem that if you update setPermissions/setRoles dynamically it doesn't detect it?

[D S]

no, the problem here is when i asign my permisions from my api and compareit from an file like my example throws that error, i need to reload the page and then my permisions work again (sorry for my bad english)

[D S]

i think i've fixed with a div as parent with the directive role:any but i dont like renders the roles in html as i can inspect it with chrome dev tools

<div
    v-for="(item, index) in items"
    :key="index"
    :role:any="item.allowedRoles"
></div>

[Jafar Esmaili]

I have

no, the problem here is when i asign my permisions from my api and compareit from an file like my example throws that error, i need to reload the page and then my permisions work again (sorry for my bad english)

also i'm have this error

[Jafar Esmaili]

i'm boring tried for fix error.
how fix error You must specify a value in the directive

[D S]

Just read the comments, i've posted my fix on one of them ( the one with the div)

[John Cruz]

@wrtisans @esmaily

EN:
Can you share the code that causes the error? I will try to reproduce the error and solve this problem in the most efficient way.

ES:
¿Pueden compartir el código que provoca el error? Intentaré reproducir el error y resolver este problema de la manera más eficiente.

Thank you very much for your patience!

[Jafar Esmaili]

thank you i'm fixed .

before:
<router-link v-permission="'SliderIndex'" to="/slider/list"> <el-menu-item index="11-1">{{ $t('slider') }}</el-menu-item> </router-link>
after
<template v-permission="'SliderIndex'"> <router-link to="/slider/list"> <el-menu-item index="11-1">{{ $t('slider') }}</el-menu-item> </router-link> </template>

[D S]

i recommend to you make the v-permission in a din and not in a template because can make problems latter

[D S]

@williamcruzme el problema, al menos en mi caso se genero debido a que quería desde un json obtener el menu, es decir, hago un request a mi backend para preguntar por el menu de la app, y obtengo algo asi:

     text: "Planeación Estrategica", 
     path: "/goals", allowedRoles: "root|rector|directivo", 
     icon: { type: "feather", name: "check-square", stroke: "white", fill: "none" } }

en mi caso el problema se causaba por que queria hacerlo en un list item de vuetify pero extrañamente se soluciono al poner el v-role en un div, como te indique en un comentario anterior

Gracias por tu super paquete, me ha sido de mucha ayuda!