Рассчитать высоту элемента в директиве

Question

Рассчитать высоту элемента в директиве

1

Почему nextTick требуется в моем примере ниже, чтобы рассчитать высоту элемента? Насколько я знаю, nextTick используется для ожидания обновлений DOM после того, как реактивные данные были изменены, что не так:

Vue.directive('test', {
    bind: function(el) {
    console.log($(el).css('height'))
    Vue.nextTick(() => {
        console.log($(el).css('height'))
    })
  }
});

var demo = new Vue({
    el: '#demo'
})

<div id="demo">
  <div v-test>
    lorem
    lorem
  </div>
</div>

http://jsfiddle.net/LPfpS/463/

Johan 12 июль 2018, в 14:04

Источник

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

Ankit Kumar Ojha · Accepted Answer · 2018-07-12T09-20-00.000Z

Вы используете неправильный крючок.

Крюковые функции Объект определения директивы может предоставлять несколько функций перехвата (все необязательные):

bind: вызов только один раз, когда директива сначала привязана к элементу. Здесь вы можете выполнять одноразовую настройку.

insert: вызывается, когда связанный элемент был вставлен в его родительский узел (это гарантирует только присутствие родительского узла, не обязательно в документе).

Vue.directive('test', {
    inserted: function(el) {
    console.log($(el).css('height'))

  }
});

var demo = new Vue({
    el: '#demo'
})

См. Скрипку

Ох ... не могу поверить, что я пропустил это, спасибо!
Я рад, что помог. пожалуйста, отметьте ответ.