Level 104
Your description is unintelligible without the underlying code.
Oct 30, 2021
12
Level 4
How can i dynamically add component template within vue?
I have a main.vue and then got some action buttons there. When i clicked on the button, i wanna to add or loop the component template into my main.vue. The component template consists form data like input, select option, checkboxes.
How can i dynamically add the component into my main.vue?
Level 51
Use boolean variable.
<your-component v-if="yourVariable" />
<button @toggle="yourVariable = !yourVariable">Toggle</button>
Level 4
For example, In my main.vue
<template>
<div>
<button @click="addPlan">Add Plan</button>
</div>
</template>
Then i have a AddPlan.vue looks like this
<template>
<div>
<form>
<input />
<input />
<input />
.....
</form>
</div>
</template>
How can i keep adding the AddPlan.vue when i click the button in Main.vue?
Level 104
@Crazylife assuming the addPlan method in the main.vue component toggles some state (e..g addingPlan), then this will work:
<template>
<div>
<button @click="addPlan">Add Plan</button>
<AddPlan v-if="addingPlan" />
</div>
</template>
Your main.vue component will import and use the AddPlan component.
// main.vue
import AddPlan from './AddPlan'
export default {
components: { AddPlan },
data () {
return {
addingPlan: false
}
},
methods: {
addPlan() {
this.addingPlan = true
}
}
}
Level 4
@tykus I am actually want to dynamically add the addPlan component, not just adding one but can be multiple.
Level 104
@Crazylife what would that look like?
Level 51
@Crazylife Use for loop with a counter.
<template>
<div>
<button @click="addPlan">Add Plan</button>
<AddPlan v-for="i in counter" :key="i" />
</div>
</template>
<script>
import AddPlan from './AddPlan'
export default {
components: { AddPlan },
data () {
return {
counter: 0
}
},
methods: {
addPlan() {
this.counter += 1;
}
}
}
</script>
Level 4
@tykus
It will be multiple AddPlan component, when i clicked add. The AddPlan component is a set of form with input, etc which need user to fill in plan details.
<AddPlan />
<AddPlan />
<AddPlan />
I will need store the data in this format when the plan details filled up by user
plans: [
{....}, // plan 1 details
{....}, // plan 2 details
... so on
]
Level 4
@MohamedTammam I will need store the data in this format when the plan details filled up by user
plans: [
{name: "plan1",....}, // plan 1 details
{name: "plan2",....}, // plan 2 details
... so on
]
If i am using the method you mentioned, how should i do to get the filled input value in object and assign to my plans?
I need to do something like this right?
<AddPlan v-for="i in counter" :key="i" :plans="plans"/>
Level 104
@Crazylife why would the state for AddPlan be maintained in main.vue?
Level 51
@Crazylife Something like this.
<AddPlan v-for="for plan plans" :key="i" :name.sync="plan.name"/>
Please check for more information about .sync: https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
Level 4
@tykus Oh, i think i got what you mean. Instead of put action button in Main.vue. I just move it into Plan.vue and use v-model to return the value right?
Please or to participate in this conversation.