Повторно заполните тот же div в Vue, используя v-for - PullRequest
Новая
       17

Повторно заполните тот же div в Vue, используя v-for

0 голосов
/ 16 марта 2019

Я думаю, что это должно быть основной концепцией Vue, но, поскольку я новичок, я не очень хорошо знаю, как получить то, что я пытаюсь.

Я могу заполнить div информацией, полученной из запроса к БД, используя V-for.

Но я бы хотел снова и снова использовать один и тот же div, повторяя клик (это опрос, который я пытаюсь сделать, ответить на вопрос, затем нажать, и выесть следующий вопрос на том же экране).На данный момент мой div повторяет X раз на экране, это не желаемое поведение.

1 Ответ

1 голос
/ 16 марта 2019

Я предполагаю, что у вас есть что-то вроде этого 

<div v-for="question in questions">
 {{question}}
</div>

Вы можете изменить его на что-то вроде этого 

<div id="app">
  <div v-for="(q, index) in questions" v-show="currentQuestion == index">
   {{q}}
   <span @click="currentQuestion++">Next</span>
  </div>
</div>

и ваши данные должны быть примерно такими: 

data: {
 questions: [1, 2, 3, 4, 5, 6,],
 currentQuestion: 1
}

Индексы в v-for начинаются с 1 в vue.

Примечания:

  • Вы можете использовать v-show вместо v-if, разница в том, что v-if удаляет тег из DOM и v-show только изменяет значение свойства display.
  • Вы должны прочитать больше об условном рендеринге .
...