Перейти вниз по странице, в отдельном компоненте - PullRequest
Новая
       12

Перейти вниз по странице, в отдельном компоненте

0 голосов
/ 12 января 2019

Используя Vue, у меня есть домашняя страница, которая, скажем, состоит из двух компонентов.

Введение компонента Компонент списка

Я хочу, чтобы в компоненте Intro была кнопка, которая переходит пользователя вниз по странице к компоненту List. Теперь обычно я делаю что-то вроде - 

<a href="#identifier">CLICK HERE...</a>

<div id="identifier">...TO JUMP HERE</div>

Но по какой-то причине это не работает, и я полагаю, что это может быть потому, что я технически прыгаю между двумя компонентами, даже если они находятся на одной странице (НАЖМИТЕ ЗДЕСЬ ... на одном, а на. ..ТЫ прыгай ЗДЕСЬ на другом)

Я прав в этом вопросе? и если да, есть ли способ это исправить?

1 Ответ

0 голосов
/ 12 января 2019

В приведенном ниже примере это работает как ожидалось. 

Vue.component('intro', {
  template: `
    <section>
      <h2>Intro component!</h2>
      <a href="#list">Goto list anchor</a>
    </section>
  `
})

Vue.component('list', {
  template: `
    <section id="list">
      <h2>List component</h2>
      <h3>This is a long list:</h3>
      <ul>
        <li v-for="i in 500">list item {{i}}</li>
      </ul>
    </section>
  `
})

new Vue({
  el: "#app",
})

Vue.config.devtools = Vue.config.productionTip = false
h2 {
  color: salmon;
  background-color: lavender;
  padding: 10px 0;

}
#list {
  margin-top: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<main id="app">
  <intro></intro>
  <list></list>
</main>
...