Vue widget

by IvanGrishov

HTML

<div id="app">
  <div class="choice" v-for="(question, index) in quiz.questions" v-bind:key="index">
    <div class="choice_inner" v-show="index <= questionIndex">
      <div class="form__body--title">
        <div class="form__body--title-wrap" v-bind:class="{ title__new: question.checkedName}">
          {{ question.checkedName ? question.newText : question.text }}
          <span class="form__body--subtitle">{{ question.checkedName }}</span>
        </div>
        <div class="form__body-block">
          <label class="radio-wrapper"
                 v-for="response in question.responses">
            <input type="radio"
                   v-bind:value="response.value"
                   v-bind:name="question.name"
                   v-model="question.checkedName">
            <span class="radio-text">{{ response.value }}</span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.form__body-block {
  display: flex;
  flex-direction: column;
}
.choice {
  margin-top: 20px;
}
#app {
  display: flex;
  margin-left: 100px;
  flex-direction: column;
}
.form__body--title-wrap {
  margin-bottom: 10px;
}
.radio-wrapper {
  margin-bottom: 5px;
}
.form__body--subtitle {
  display: block;
}
.choice_inner {
  background-color: #8E44AD;
  color: #fff;
  border-radius: 8px;
  padding: 15px;
}
.choice {
  display: flex;
}

Vue

var quiz = {
  questions: [
    {
      text: "Выберите год выпуска",
      newText: "Поколение",
      name: 'generation',
      responses: [
        {
          value: '(1981 - 1986)',
        },
        {
          value: '(1986 - 1994)',
        },
        {
          value: '(1996 - 2002)',
        }
      ],
      checkedName: '',
    },
    {
      text: "Выберите тип кузова",
      newText: "Тип кузова",
      name: 'body',
      responses: [
        {
          value: 'Купе',
        },
        {
          value: 'Универсал',
        },
      ],
      checkedName: '',
    },
    {
      text: "Выберите коробку передач",
      newText: "Коробка передач",
      name: 'transmission',
      responses: [
        {
          value: 'Ручная',
        },
        {
          value: 'Автоматическая',
        },
        {
          value: 'Роботизированная',
        },
        {
          value: 'Вариативная',
        },
      ],
      checkedName: '',
    },
    {
      text: "Выберите двигатель",
      newText: "Двигатель",
      name: 'engine',
      responses: [
        {
          value: 'Я не знаю модификации',
        },
        {
          value: '1.0 MT (50 л.с.)',
        },
      ],
      checkedName: '',
    },
  ]
}

new Vue({
  el: '#app',
  data: {
    quiz: quiz,
    questionIndex: 0,
    userResponses: Array(),
  },
  computed: {
    bToWatchGeneration: function() {
      return quiz.questions[0].checkedName
    },
    bToWatchBody: function() {
      return quiz.questions[1].checkedName
    },
    bToWatchTransmission: function() {
      return quiz.questions[2].checkedName
    },
    bToWatchEngine: function() {
      return quiz.questions[3].checkedName
    },
  },
  watch: {
    bToWatchGeneration: function() {
      ///// обновление количества табов с параметрами
      console.log(this.questionIndex)
      this.questionIndex = 1
      /// очистка параметров
      for (let i = 1; i < this.quiz.questions.length; i++) {
        if...