Как итерировать по каждому элементу и назначать класс в данном случае?

Question

[wiyod]

Я разбиваю слово по буквам и необходимо поочередно добавлять каждому элементу (букве) класс https://codepen.io/kodej/pen/boxjop

Наглядный пример Rotate 2 - https://codyhouse.co/demo/animated-headlines/index.html

Насколько я понял, то если я использую v-for="(word, index) in element.value.split('')" то я не могу обратится к индексу, скажем в mounted? Как тогда быть? Ну не писать же в data вручную объект с каждой буквой и property.

Comments

[alvvi]

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

Answer 1

[0xD34F]

Так?

Comments

[wiyod]

У меня аж челюсть отвисла. КАК вы это делаете? Как мне стать таким как вы? И вроде все просто, а подобное даже в голову не приходило. (Пошел практиковаться)

Answer 2

[lavezzi1]

Внутри v-for можно использовать метод который пример в качестве аргумент нужный вам index. И уже внутри метода возвращаете нужный класс для элемента цикла v-for.

methods: {
  setRandomClass(word, index) {
     return some class here;
  }
}

<div v-for="(word, index) in element.value.split('')" :class="[setRandomClass(word, index)]"></div