Mirando la documentación de directivas personalizadas: https://vuejs.org/v2/guide/custom-directive.html
Se da el siguiente ejemplo:
Vue.directive('pin', { bind: function (el, binding, vnode) { el.style.position = 'fixed' var s = (binding.arg == 'left' ? 'left' : 'top') el.style[s] = binding.value + 'px' } }) new Vue({ el: '#dynamicexample', data: function () { return { direction: 'left' } } })Sin embargo, mi clase está estructurada con una sintaxis diferente:
export default { name: 'dynamicexample', En otras palabras, no estoy usando la new Vue que se proporciona en el ejemplo.
¿Dónde y cómo agrego la directiva en mi código para que funcione?
La Vue.directive . no funciona si solo la pego arriba de export default { name: 'dynamicexample', . Eso solo hace que la aplicación falle sin ninguna advertencia o error.
new Vue({ el: '#demo', directives: { focus: { inserted: function (el) { el.focus() } } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <input type="text" v-focus /> </div>Puedes intentar crear un archivo js:
export const MyDirective { name: 'dynamicexample', /* your code */ }luego, en la plantilla donde lo usas:
import MyDirective from './directives/MyDirective.js'; export default { directives: { MyDirective } /* ... */ }También puedes usar
Vue.directive('my-directive', MyDirective)para declararlo globalmente.