Add vue directive

Hi,

It would be really nice if we could do something like

<div v-can="deleteSomething">Delete something</div>

Update:

Requirements:

• create a separate Vue plugin (e.g., AbilityDirectives)
• this plugin should provide global directive v-can
• directive should work similar to v-if (i.e., remove/insert DOM nodes when condition changes)
• an array as argument to directive v-can="[action, subject, field]" (e.g., v-can="['read', post, 'title']")
• arguments as directive arguments v-can.action.field.of="subject", .of is optional, just for readability (e.g., v-can.read.title.of="post", v-can.read="post")
• arguments as directive arguments for class checks v-can.action.field.of.subject, .of is optional, just for readability (e.g., v-can.read.title.of.Post, v-can.read.Post)

[stalniy]

Another thoughts on this topic:

Sometimes you may want to add css class based on user permissions:

<div :class=“{ my: $can(‘read’, ‘User’) }”>...

Or use v-show instead of v-if

<div v-show=“$can(‘read’, ‘User’)”>...

This kind of stuff works very nice with provided $can method but not with v-can

[stalniy]

ok, lets wait some time to see whether there are other people who wants such directive.