Как сделать выпадающую форму от выбранного select?

Question

[qwentry]

Есть select с выбором нужной формы:

<select>
<option>Форма №1</option>
<option>Форма №2</option>
<option>Форма №3</option>
</select>

Как сделать, чтобы по определенному выбору показывалась нужная форма?

Comments

[Вадим]

Так как Вы спрашиваете в контексте Vue, то ответ будет таким:
привязываете селект к v-model, каждому option свой value.
Вставляете три формы, каждой пишите v-show="v-model_селекта === нужное-значение"
профит

[qwentry]

Вадим, спасибо.

[qwentry]

Вадим,

<select v-model="selected">
  <option value="form1">Форма №1</option>
  <option value="form2">Форма №2</option>
  <option value="form3">Форма №3</option>
</select>

<form  v-show="v-model_selected === form1" class="formGroup">
  <input type="text" placeholder="Форма №1">
</form>
<form v-show="v-model_selected === form2" class="formGroup">
  <input type="text" c placeholder="Форма №2">
</form>
<form v-show="v-model_selected === form3" class="formGroup">
  <input type="text" placeholder="Форма №3">
</form>

Я же правильно понял? Или я допустил где-то ошибку

[Вадим]

qwentry, не совсем.
Вместо v-model_selected в v-show нужно указать v-model, который Вы привязали к селекту - selected

<form v-show="selected === form3" class="formGroup">
  <input type="text" placeholder="Форма №3">
</form>

[qwentry]

Вадим,

<template>

<select v-model="selected">
  <option value="form1">Форма №1</option>
  <option value="form2">Форма №2</option>
  <option value="form3">Форма №3</option>
</select>

<form  v-show="selected  === form1" class="formGroup">
  <input type="text" placeholder="Форма №1">
</form>
<form v-show="selected  === form2" class="formGroup">
  <input type="text" c placeholder="Форма №2">
</form>
<form v-show="selected  === form3" class="formGroup">
  <input type="text" placeholder="Форма №3">
</form>

</template>

<script>
export default {
    data() {
        return {
          selected: '',
        }
    },
}
</script>

Формы скрыты, но при выборе не показывает их, и видимо я опять где-то накосячил

[Вадим]

qwentry, Да, есть немного. У вас в selected попадает строка со значением выбранного option.
А вы делаете сравнение со свойством.
v-show="selected === form1" переделать на v-show="selected === 'form1'"

[qwentry]

Вадим, Огромное спасибо, что-то я просмотрел это..

Answer 1

[Tim]

примерно так

Comments

[qwentry]

Tim, спасибо