Как менять компоненты при клике?

Question

[JastaFly]

Начал изучать vue и решил написать приложение на нём. Для начала создал два компонента:

<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="[e-mail]" 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>

Вторая форма такая же, имеются лишь небольшие косметические отличия в стилях. Так вот мне нужно чтобы в при клике по кнопкам в шапке этой формы один компонент менялся на другой:

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

Для этого во корневом файле я использую тег component:

<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>

Но ничего не работает. Хотя если скопировать две кнопки из компонента в корневой файл, то формы меняются. Почему первый вариант не работает?

Comments

[Михаил]

в консоле что

[Антон Антон]

а шапка в неработающем варианте где?
неплохо быпример на jsfiddle или codepen выложить, для компонентов можно использовать https://ru.vuejs.org/v2/guide/components-edge-case...

Answer 1

[Арсений Матыцин]

Vue это про однонаправленный поток данных. Проблема не в том, что не работает :is, а в том, что он не знает, что данные изменились в каком-то компоненте. Читай про передачу данных между родителем и ребенком в документации.

Answer 2

[Никита Павлюк]

JastaFly Вы пытаетесь изменить компонент "formOne" на "formTwo" внутри этих компонентов. Так не работает. В :is="componentName" необходимо передавать имя компонента на том же уровне (либо еще выше, но не ниже), что и сам <component is="name" /> . В Вашем случае достаточно вынести

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

в рутовый компонент.
Либо использовать vuex. В каждом компоненте вызывать мутацию и менять флаг currentForm, например, в сторе. В Рутовом компоненте подключить геттер этого флага и менять директиву is

<template>
  <div id="app">
    <component :is="current"/>
  </div>
</template>

<script>
import Form1 from "./components/Form1.vue";
import Form2 from "./components/Form2.vue";
export default {
  name: "app",
  components: {
    form1: Form1,
    form2: Form2
  },
  computed: {
    current() {
      return this.$store.getters.current;
    }
  }
};
</script>

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    current: "form1"
  },
  getters: {
    current: (state) => {
      return state.current
    }
  },
  mutations: {
    setForm(state, payload) {
      state.current = payload;
    }
  },
  actions: {
    //
  }
});

Answer 3

[JastaFly]

В итоге решил проблему создав ещё один компонент-контейнер и импортировав в него формы..... спасибо всем за помощь

Comments

[londhor]

А мог создать событие $emit, и не тратить столько времени. Прочти доку еще раз.