Change components on click?

Question

JavaScript

Good day to all! I started learning vue and decided to write a simple application on it. First I created two components:

<template>
  <div class="form">
    <div class="form__head">
      <span class="form__change" @click="form='formOne'">Форма 1</span>
      <span class="form__change" @click="form='formTwo'">Форма 2</span>
    </div>
    <div class="logo">
      <div class="logo__img">
        
      </div>
      <div class="logo__text">Alo Bla</div>
    </div>
    <form onsubmit="return false;" action="">
      <label for="email">E-mail:</label>
      <input placeholder="[email protected]" type="text" id="email" name="email">
      <label for="number">Номер:</label>
      <input placeholder="89374127964" type="text" id="number" name="number">
      <label for="name">Номер:</label>
      <input placeholder="Вася" type="text" id="name" name="name">
      <input type="submit">
    </form>
  </div>
</template>

The second form is the same, there are only slight cosmetic differences in styles. So I need to change one component to another when clicking on the buttons in the header of this form:

<div class="form__head">
      <span class="form__change" @click="form='formOne'">Форма 1</span>
      <span class="form__change" @click="form='formTwo'">Форма 2</span>
    </div>

. To do this, I use the component tag in the root file:

<template>
  <div id="app">
    <component :is="form"></component>
  </div>
</template>
<script>
import formOne from './components/form_one'
import formTwo from './components/form_two'
import formHeader from './components/form_header'
export default {
  name: 'App',
  components: {
    formOne,
    formTwo,
    formHeader
  },
  data() {
    return {
      form: 'formOne'
    }
  }
}
</script>

But nothing works. Although if you copy two buttons from the component to the root file, then the forms change. Can you tell me why the first option does not work?!??

Answer 1

Vue is about unidirectional data flow. The problem is not that :is doesn't work, but that it doesn't know that the data has changed in some component. Read about the transfer of data between parent and child in the documentation.

Answer 2

As a result, I solved the problem by creating another container component and importing forms into it ..... thanks to everyone for the help