vuetify значение встроенного стиля v-bind не обновляется - PullRequest
Новая
       50

vuetify значение встроенного стиля v-bind не обновляется

0 голосов
/ 06 июня 2019

У меня есть хитрый макет, который, я считаю, может реагировать только на JavaScript, но мне не удается получить встроенный стиль со связанными данными для достижения этой цели.Вокруг изображения есть элемент-обертка, которым я хочу быть высота изображения плюс 80px.Для краткости я просто опубликую два элемента, которые мне нужны для совместной работы, и вырежу дополнительную разметку, потому что она не имеет значения. 

<v-flex v-resize="onResize" v-bind:style="{height: this.imageHeight}" xs12 md6>
  {{this.imageHeight}}
  <img src="../assets/images/image1.jpg" alt="image" ref="desktop-image">
</v-flex>

В данных я определяю imageHeight как 0 всначала с целью обновления этого значения после загрузки страницы или изменения размера экрана.

data () {
  return {
    imageHeight : 0
  }
}

Затем в mounted() я переопределяю данные imageHeight как желаемую высоту. 

this.imageHeight = this.$refs["desktop-image"].offsetHeight + 80;

Я также включаю это в метод изменения размера. 

 onResize () {
    this.imageHeight = this.$refs["desktop-image"].offsetHeight + 80;
  }

После загрузки страницы или изменения размера экрана выводимое мной значение {{this.imageHeight}} над изображением корректно обновляется, но оно никогда не обновляется в v-bind:style элемента изображения, поэтому высота остается на уровне0px.

Как получить данные встроенного стиля для обновления, как это делается в другом месте?

1 Ответ

1 голос
/ 06 июня 2019

CSS-свойство height должно быть либо:

  • a <length> значение с единицами длины (для ненулевых значений); например, 200px

или

Значение number недопустимо. Значение имеет вид строки, поэтому ваш код должен добавить 'px' к вычисленному числу: 

this.imageHeight = this.$refs["desktop-image"].offsetHeight + 80 + 'px';

демо

...