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

#vue.js #populate

#vue.js #заполнить

Вопрос:

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

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

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

Ответ №1:

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

 <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 свойства.
  • Вам следует подробнее прочитать об условном рендеринге.

Комментарии:

1. Да, это работает замечательно, большое спасибо за помощь. Я не знал о v-show.