Как сделать якоря на Vue js?

Question

[Synakten]

Добрый вечер, столкнулся с проблемой реализации якорей, ранее делал такое на Jquery, но тут возникла потребность реализовать подобное на Vue js, так вот, есть код, ну и допустим секции к которым, например по id нужно перемещаться, (по аналогии с jquery), вопрос как обратиться к каждому элементу отдельно, что бы расставить якоря или это во Вью как-то иначе, делается?

<ul>
        <li v-for="nav in navs" :key="nav.id">{{ nav }}</li>
      </ul>

 navs: [
        'item1',
        'item2',
        'item3',
        'item4',
        'item5'
      ]

Answer 1

[0xD34F]

data: () => ({
  items: [ '...', '...', ... ],
}),

<a v-for="(n, i) in items" :href="`#item_${i}`">{{ n }}</a>
<ul>
  <li v-for="(n, i) in items" :id="`item_${i}`">{{ n }}</li>
</ul>

Так нормально будет?

Comments

[Александр Филиппенко]

А есть красивый способ плавную прокрутку сюда же приделать?

[Synakten]

Да, спасибо Вам большое.

[0xD34F]

А есть красивый способ плавную прокрутку сюда же приделать?

Да запросто.

[Александр Филиппенко]

0xD34F, круто спасибо)

[Synakten]

А еще вопрос, каким образом это можно привязать к id-шникам секций, например

<section id="sect1">
<h2>content1</h2>
</section>
<section id="sect2">
<h2>content2</h2>
</section>
<section id="sect3">
<h2>content3</h2>
</section>
<section id="sect4">
<h2>content4</h2>
</section>

[0xD34F]

Так?

[Synakten]

0xD34F, да, но все же, секции с разным контентом и при попытке закцлить v-for-ом страницы дублируються и там z-indexов еще всяких много, я так понимаю нужно указыавать конкретный id к конкретной секции, я же не могу вставлять html разметку в объект c id с идентификатором contnet1, 2...5 ?
Вот в таком случае как?

<header id="head">
<h3> lorem </h3>
<p> lorem ipsum </p>
</header>
<section id="sect1">
<h2>content any</h2>
<h3>lorem ipsum dolar </h3>
<span>lorem ips</span>
</section>
<section id="sect2">
<h2>content any</h2>
<span>lorem ips</span>
</section>
<section id="sect3">
<h2>content3</h2>
</section>
<section id="sect4">
<h2>content4</h2>
</section>

[0xD34F]

Synakten, html вставить можно - есть директива v-html.

[Synakten]

Нет, имею ввиду сюда.

new Vue({
  el: '#app',
  data: {
    navs: [
      { id: 'item1', content: 'тут должно быть много html' },
      { id: 'item2', content: 'здесь другой html' },
      { id: 'item3', content: ' и здесь другой html' },
      { id: 'item4', content: 'здесь совсем другой html' },
      { id: 'item5', content: 'content5' }
    ]
  }
});

[0xD34F]

Synakten, честно говоря, не очень понимаю вашу проблему. Лучше создайте новый вопрос, и максимально подробно там изложите, с чем у вас возникли затруднения.

[Synakten]

Все, разобрался)) просто с айдишниками запутался)) Спасибо Вам огромное!