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();
});