Как использовать v-for как цикл с изменяемым свойством?

Question

[Alianos]

Здравствуйте, у меня есть

<div v-for="i of 10" :key="i" class="frame" >
    </div>

Но мне нужно чтоб каждому div-у в зависимости от итератора присваевался особый background-image например по такому шаблону

backgroundImage =
`url(${require("../assets/images/slides/" + this.$assetsResolution + "/" + i + ".jpg")})`;

где i- итератор а this.$assetsResolution просто статическая переменная (у всех дивов одинакова)
Как ето реализовать

Answer 1

[Алексей Ярков]

Псевдокод компонента:

<div v-for="index of 10" :key="index" class="frame" :style="`background-image: url(${getImageUrl(index)})`" >
  {{ index }}
</div>

{
  methods: {
    getImageUrl(index) {
      return `/images/slides/${this.$assetsResolution}/${index}.jpg`;
    }
  }
}

В общем типа такого что-то. И никакого require, работать не будет.

P.S. Писал с телефона, не проверял.

Answer 2

[Alex]

Или проще:

{
  computed: {
    divs() {
      // Массив ваших дивов, со всеми необходимыми параметрами
      return [{bg: ''}, {bg: ''}]
    }
  }
}

<div v-for="(div, index) of divs" :key="index" class="frame" :style="`background-image: url(${div.bg})`" >
  {{ index }}
</div>

Comments

[Alianos]

Спасибо, позвольте спросить а можно ли както достучатся до контекста vue чтоб можно было обойтись без computed или data

:background-image="`url(${require('../assets/images/slides/' +
        vnode.context.$assetsResolution + // без етой строчки все работает но vnode = undefined, this тоже
        '/' +
        i +
        '.jpg')})`"

Или ето не возможно... Можно ли попросить статю на тему контекста или области видимости того что в {{}} етих скобках... Тоесть почему там не работает просто this...

[Alex]

Alianos, В шаблоне контекст установлен по умолчанию. И это не глобальный контекст, а именно вашего компонента.
То есть <span>{{ foo }}</span>
Будет эквивалентно вызову this.foo
А вот вещи вроде
<span @click=" console.log('foo') "></span>
работать не будут, если только вы не занесёте объект console в ваш компонент.

Из документации Vue 2

Выражения в шаблонах выполняются в режиме «песочницы», поэтому доступ есть только к ограниченному списку глобальных объектов, таким как Mathи Date. Не пытайтесь получить доступ к пользовательским глобальным объектам внутри выражений используемых в шаблонах.

обойтись без computed или data

Я бы не советовал. Это вредит как читаемости так и производительности (Vue кэширует computed свойства и не пересчитывает их без надобности).