1

Imagine I have a order form with 3 stages - Personal details, Order details, payment.

I want to toggle the next component from within the previous one (hoping to adjust the value of 'step')

<Component1 v-if="step = 1"></Component1>
<Component2 v-else-if="step = 2"></Component2>
<Component3 v-else></Component3>

So, with those on my view, is it possible for me to pass the value of 'step' in to component1 and do something like 

<button v-on:click="step = 2">
   Submit
</button>

then on that click, update the value of step on my main view (with the 3 components) and with that, hide my first completed component and displaying the second?

Thanks for any insight!

Improve this question
2
  • What exactly is your question? Did you try this and run into issues? Commented Jun 2, 2020 at 12:54
  • You need to bind the value into the component and then emit a new value to the parent when you click a link. If you emit the event input and bind the value value, then you can use v-model. Commented Jun 2, 2020 at 13:04

2 Answers 2

Reset to default
5

Why you dont use dynamic components?

On your parent component you listen to the event that changes yours step, i named it here nextStep. This event triggers the method changeStep that changes the component name.

<component @nextStep="changeStep" :name="selectedComponent"></component>

import component1 from "../components/component1.vue";
import component2 from "../components/component2.vue";
import component3 from "../components/component3.vue";
export default {
   data(){
      return {
         selectedComponent: "component1"
      }
   }
},
methods: {
   changeStep(step){
      this.selectedComponent = step;
   }
},
components: {
   component1,
   component2,
   component3
}

//in the child component

method: {
   changeStep(){
      this.$emit("nextStep", "component2");
   }
}

This is how you emit the event to the parent to change the component

You just need to change the property selectedComponent to the component name you want and it will change it

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Could you extend your answer with how to two-way-bind the name (e.g. v-model)? I think he asked for that too.
@ssc-hrep3 you mean to emit the name to the parent?
Yes, exactly. 👍
Is it possible to move back to the last component on history.back()? Can I somehow add the component switch to the history?
0

If you are still searching for the answer. This first code to add as your parent component.

 <template>
    <main>
        <component @nextStep="changeStep" v-bind:is="selectedComponent"></component>
    </main>
</template>
<script lang="ts">
import Setup1 from '@/components/Setup/Setup1.vue';
import Setup2 from '@/components/Setup/Setup2.vue';
import Setup3 from '@/components/Setup/Setup3.vue';

export default {
    name: "SetupView",
    components: {
        Setup1, Setup2, Setup3
    },
    data() {
        return {
            selectedComponent: "Setup1"
        }
    }, methods: {
        changeStep(step: string) {
            this.selectedComponent = step;
        }
    }, 
}

</script>

Add the code below as the child component .

<template>
        <div>
            Setup step 1
            <button @click="changeStep">Next step</button>
        </div>
</template>

<script lang="ts">
export default {
    name: "setup1", 
    methods: {
        changeStep() {
            this.$emit("nextStep", "Setup2");
        }
    }

}
</script>

v-bind:is="selectedComponent"

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.