v-bind:style по ключу

Question

У меня массив картинок. Нужно чтобы каждая картинка была разной высоты. Для этого я задаю стиль с функцией со случайным числом 150-300 px. Но одно случайное число применяется ко всем сразу. Как привязать стиль к каждой картинке отдельно?

<template v-for="(slide, index) in yacht.images">
   <a :href="slide.path" data-fancybox="preview" class="test">
      <img :style="{height: test}" :src="slide.path" alt="Image" width="25%" 
       class="big-img" img-top 
       overlay/></a>
</template>


computed: Object.assign(
        mapState({
            test() {
                return  Math.floor(Math.random() * (300 - 150) + 150) + 'px'
            } ...

Answer 1

Вот так работает:

<a  :href="slide.path" data-fancybox="preview" class="test">
    <img :style="{height: test()}" :src="slide.path" alt="Image" width="25%" 
          class="big-img" img-top overlay/>
</a>

methods: {
    test() {
        return Math.floor(Math.random() * (300 - 150) + 150) + 'px'
    },

БЛОГ НА HUSL

v-bind:style по ключу

Ответы (1 шт):