Ипользование данных из цикла Vue?

Question

[dimakal1]

Как ипользовать данные из v-for в h1 (category)?
чет не понять, подскажите плиз
может нужно как то записать их в переменную, тогда получаетя я смогу их передавать другим компонентам

Код:

<div class="categories">
            <div class="wrapper">
              <ul>
                <li v-for="(category, i) in categories" :key="i">
                  <a :href="category.link">{{ category.text }}</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="wrapper">
            <div class="heading">
              <h1>  {{category.text}} </h1>
            </div>
          </div>

Comments

[Михаил]

Цикл повыше вынести не?

[Александр]

Михаил, вряд ли. Циклом он выводит список ссылок для всех имеющихся категорий, а в h1 ему, скорее всего, нужно вывести заголовок текущей категории, в которой находится пользователь

Answer 1

[0xD34F]

<a :href="category.link">

Это как понимать? Или добавьте роутер, и, соответственно, используйте router-link, или уберите ссылки.

Роутера нет - добавляем в компонент свойство, значением которого будет ссылка на элемент массива, содержащий данные выбранного элемента списка. Если что-то выбрано, то показываем (v-if) содержимое этого объекта.

Роутер есть - id, индекс или ещё что-то уникальное (на ваше усмотрение) используется в качестве значения параметра маршрута, передаётся в компонент маршрута, на основе переданного значения из массива извлекается нужный элемент (оформляем это дело как вычисляемое свойство).

Answer 2

[Ольга Ветер]

Пока это выглядит так, что должно быть двумя разными компонентами... В который или через стор берется или пропсом передается нужное значение категории

Answer 3

[jeruthadam]

Это бессмысленный код.

<div class="categories">
          <div class="wrapper">
            <div class="heading">
              <h1>  {{category.text}} </h1>
            </div>
          </div>