Vue JS динамическое связывание фонового стиля изображения не работает

Question

Фоновое изображение не применяется к этому div, когда я вызываю changeBgImage функцию при загрузке. Я искал в Интернете, но не получил желаемого результата. Пожалуйста, помогите мне

<div class="home_search" id="home_search" v-bind:style="{ background: `url(${imageUrl}) no-repeat center` }">
  <HeaderComponent />
</div>

changeBgImage () {
  let rand = Math.round(Math.random() * 4);
  this.imageUrl = "../assets/img/home_" + rand + ".jpg";
  console.log(this.imageUrl)

}

Answer 1

Вы должны добавить ширину и высоту к тегу (или контейнеру)

Пример: https://codepen.io/anon/pen/vzyjww?editors=1010

<div 
  :style="{ background: `url(${imageUrl}) no-repeat center` }" 
  style="width: 350px; height: 150px"
>
</div>