@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="pupkin1976@gmail.com" 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>

Но ничего не работает. Хотя если скопировать две кнопки из компонента в корневой файл, то формы меняются. Можете подсказать почему первый вариант не работает?!??
  • Вопрос задан
  • 90 просмотров
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
CEO iAmStudio, предприниматель.
Vue это про однонаправленный поток данных. Проблема не в том, что не работает :is, а в том, что он не знает, что данные изменились в каком-то компоненте. Читай про передачу данных между родителем и ребенком в документации.
Ответ написан
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: {
    //
  }
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@JastaFly Автор вопроса
В итоге решил проблему создав ещё один компонент-контейнер и импортировав в него формы..... спасибо всем за помощь
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы