Можно ли использовать ключ без V-for в VUE? - PullRequest
0 голосов
/ 10 мая 2019

Я использую VUE для анимации слайдера (список изображений).Есть два / три слайда, каждый из которых состоит максимум из 9 изображений.У меня есть вычисленное свойство slide, которое возвращает текущий набор изображений.Есть еще одно свойство start, которое обозначает номер первого изображения текущего слайда.Элемент <ul> является прямым потомком <transition>, поэтому анимация происходит только при изменении ключа <ul>.Первый фрагмент - это то, как я хотел бы решить проблему.Это работает, но я не могу найти никакой информации, если можно использовать свойство: key для элемента без цикла v-for.

Как проблема была решена до сих пор?Там было две петли v-for.Свойство вычисляемого слайда вернуло [слайд] и искусственно зациклило одноэлементную таблицу.Проблема, которую я вижу, состоит в том, что циклы v-for воспринимают все объекты как: ключ, а это не то, что рекомендует документация.Второй фрагмент - это то, как код выглядит прямо сейчас.

        <transition>
            <ul :key="this.start">
                <li v-for="image in slide" :key="image.id">
                    <a>
                        <img />
                    </a>
                </li>
            </ul>
        </transition>
        <!--CURRENTLY-->
        <transition>
            <ul v-for="slide in slides" :key="slide">
                <li v-for="image in slide" :key="image">
                    <a>
                        <img />
                    </a>
                </li>
            </ul>
        </transition>

1 Ответ

1 голос
/ 10 мая 2019

Поскольку вы попросили меня опубликовать мой комментарий в качестве ответа, я просто процитирую документацию: https://vuejs.org/v2/api/#key

Он также может использоваться для принудительной замены элемента / компонента вместо его повторного использования.,Это может быть полезно, если вы хотите:

  • Правильно запускать ловушки жизненного цикла компонента
  • Запускать переходы

Например:

<transition>
  <span :key="text">{{ text }}</span>
</transition>

Когда изменяется text, <span> всегда будет заменяться вместо исправления, поэтому будет инициирован переход.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...