How to define a directive with Vue 2.0 that always binds as a string

3

I'm starting now with Vue 2.0 and I'm creating directives so that I can manipulate the style of an element based on the content of that directive, like this:

Vue.directive('margin', function (el, binding) {
    $(el).css('margin', binding.value);
});

My problem is that for me to give a binding in value, I'm forced to leave the field always formatted as a string, and this I see as unnecessary ... like this:

<div class="foo" v-margin="'auto'"></div>

If I happen to pull the single quotes from within the binding, the error message occurs:

[Vue warn]: Property or method "auto" is not defined on the instance but 
            referenced during render. Make sure to declare reactive data properties 
            in the data option. 

Is there any way to "force" the directive to always interpret my binding as plain text? so I would not need to pass the single quotes from 'auto' .

  

NOTE I have tried to set a toString() within the directive binding parameter, but without success, like this:

Vue.directive('margin', function (el, binding) {
    $(el).css('margin', binding.value.toString()); // <- toString();
});
    
asked by anonymous 09.01.2017 / 14:57

1 answer

0

I do not think it's possible, according to "Directives in Depth" : p>

  

For security reasons, in inline expressions you can only access properties and methods present in the current context ViewModel and its parents.

But if you want it to work and see no problem seeing the warning, you can use binding.expression instead of bindig.value , the value will always be string, but obviously not the best option by a warning does not seem to be a good tradeoff.)

    
14.01.2017 / 03:42