On component1.vue I have
export default {
data () {
return {
editItemNumber: null,
editBreakdownNumber: null
}
}
On component2.vue I have a table populated by an array
On that table is an edit button. Among the item in that table is itemNumber value. Which I need to assign from that particular row clicked to the editItemNumber on component1.vue
<b-table show-empty bordered striped hover :items="itemTableList" :fields="fields">
<template slot="actions" scope="row">
<b-btn variant='success' size="sm" @click.stop="edit(row.item,row.index,$event.target)">Edit</b-btn>
</template>
</b-table>
As you see above originally all of this was on one component and I was just calling to an edit function which repopulated the v-models with that rows contents. But now with everything split among components I don't know how to edit this to do what I've been tasked with.
I've never used JavaScript, vue or much of anything beyond basic HTML. I'm a .NET dev who's been tasked with helping out on some web based work and I'm floundering. So any help is appreciated.
The preferred way to move data between components is with events.
Normally you use props
to pass data from a parent component to a child, and events to pass from a child up to a parent.
So the edit
method of C2
can be something like
edit(item, index, target) {
const payload = {
item,
index,
target
};
this.$emit('edit', payload);
}
Then you just have to listen to that event in C1
. Notice the @edit
attribute: that means when the edit
event is fired from component-one
, run my "edit" method.
<template>
<div>
<p>{{ editItemNumber }}</p>
<component-two @edit="edit" />
</div>
<script>
export default {
data () {
return {
editItemNumber: null,
editBreakdownNumber: null
};
},
methods: {
edit(eventPayload) {
this.editItemNumber = eventPayload.item.editItemNumber
}
}
</script>
If you both C1
and C2
are children of the same parent P
the idea is the same, except C1
can't listen directly to C2
. Instead P
will listen to the edit event and pass the needed changes down to C1
through its props
.
The docs on components are really good, pay special attention to the sections on props and custom events. https://v2.vuejs.org/v2/guide/components.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.