Ответы пользователя по тегу Vue.js
  • Как менять компоненты при клике?

    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: {
        //
      }
    });
    Ответ написан
    Комментировать