Появление другой формы по нажатию кнопки

309

13 апреля 2022, 15:10

По нажатию кнопки должна появляться другая форма и нужно добавить кнопку назад (возвращает на первую форму), не могу сообразить как это реализовать. Ещё нужно, чтобы текст из input добавлялся в таблицу, насчёт этого пока не думала.

    <div id="f_all">
<form id="f1">
    <label>Имя</label>
    <input type="text">
    <label>Фамилия</label>
    <input type="text">
    <label>E-mail</label>
    <input type="text">
    <label>Возраст</label>
    <input type="text">
    <button id="elem">ОК</button>
</form>
<form id="f2" v-if=elem.onclick>
    <table>
    <tr>
        <td>Имя</td>
        <td></td>
    </tr>
    <tr>
        <td>Фамилия</td>
        <td></td>
    </tr>
    <tr>
        <td>E-mail</td>
        <td></td>
    </tr>
    <tr>
        <td>Возраст</td>
        <td></td>
    </tr>
    </table>
</form>
</div>
<script src="js/vue.js"></script>
<script>
let f=new Vue({
el:"#f_all",
date:{
    elem:'',
},
})
</script>

Answer 1

Для управления отображениями ваших форм можно использовать условную отрисовку: создаете допустим свойство showForm в data и управляя значением данного свойства - управляете отображением форм через директиву v-if

Для вывода, введенных в первую форму данных, на второй форму нужно во-первых подключить к каждому полю ввода формы директиву v-model, чтобы обеспечить двунаправленное связывание данных с элементами форм.

Получается создаете свойство user в data и каждому полю ввода добавляете v-model. После ввода данных в форму они заносятся в user и затем их можно вывести в вашей второй форме.

Привожу пример:

new Vue({
  el: "#f_all",
  data: {
    user: {},
    showForm: false
  },
  methods: {
    submitForm1(e) {
      e.preventDefault()
      this.showForm = true
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="f_all">
  <form v-if="!showForm" id="f1" @submit="submitForm1">
    <label>Имя</label>
    <input type="text" v-model="user.name">
    <label>Фамилия</label>
    <input type="text" v-model="user.family">
    <label>E-mail</label>
    <input type="text" v-model="user.email">
    <label>Возраст</label>
    <input type="text" v-model="user.age">
    <button id="elem">ОК</button>
  </form>
  <form id="f2" v-else>
    <table>
      <tr>
        <td>Имя</td>
        <td>{{ user.name }}</td>
      </tr>
      <tr>
        <td>Фамилия</td>
        <td>{{ user.family }}</td>
      </tr>
      <tr>
        <td>E-mail</td>
        <td>{{ user.email }}</td>
      </tr>
      <tr>
        <td>Возраст</td>
        <td>{{ user.age }}</td>
      </tr>
      <tfooter>
        <button type="button" @click="showForm=false">Назад</button>
      </tfooter>
    </table>
  </form>
</div>