Multiple arguments in custom directives

[thetutlage]

I wanted to build a form element directive based upon arguments passed to it while calling.

<div v-form-element="label:Name,type:text"></div>

Now i need some way to extract arguments as an object, where the current api is not working for me. This is what i have tried so far.

Vue.directive('form-element',{
   bind: function(){
      console.log(this.arg);
   }
});

and it returns label only

[yyx990803]

When you have a comma separating list, it's considered "multiple clause" and each item gets its own directive instance. So, in the first instance this.arg will be "label", in the second one it will be "type".

It seems in your case you are trying to bend what should be a component into a directive. Directives in Vue are supposed to only handle simple mapping of a data property to some DOM manipulation. If you want to have something that encapsulates more complex behavior, especially accepting options, you should just use a component instead.

[thetutlage]

Are components good place to do DOM manipulation ?

[yyx990803]

You can do whatever you want inside a component. You can leverage built-in directives or you can just do direct manipulation.

[thetutlage]

Okay cool make sense, angular says keep it in directives only, and react says have components. Vue says let's have both and do fancy stuff in components and keep directives for small manipulations