2-way binding в директиве почему не работает?

Question

[wufapexef]

Есть такая директива и теплейт

Vue.directive('tack', {
  bind (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
})

<template>
  <div class="hello">
    <input type="text" v-model.lazy="directiveValue">
    {{directiveValue}}
    <h1 v-tack="directiveValue">{{ msg }}</h1>
  </div>
</template>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      directiveValue: 0
    }
  }
}

Почему при вводе в инпут и изменении значений directiveValue это значение не передается в директиву?

Answer 1

[0xD34F]

Хук bind вызывается однократно, в момент привязки директивы к элементу. Используйте update для обработки изменений.

Comments

[wufapexef]

ОК, спасибо, отчасти заработало. Отчасти, потому что заработало обновление значения, но при изначальном рендере значение почему-то не передается. Я поставил 100, но оно не передалось. Почему?

[0xD34F]

wufapexef, update не вызывается при привязке, убирать bind было излишне.

[wufapexef]

Не понял. Надо оба что ли? Как тогда будет выглядить все?

[wufapexef]

Спс, работает

Vue.directive('tack', {
  bind (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  },
  update (el, binding, vnode) {
    el.style.top = binding.value + 'px'
  }
})