How to render vuejs component on sibling submit
Question
I have the following code
<body>
<div class="content" id="app">
<file-management></file-management>
<attachment-list></attachment-list>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
FileManagement component code:
<template>
<div>
<button type="button" @click="storeList()">
Save
</button>
</div>
</template>
<script>
export default {
methods: {
storeList: function () {
axios.post('/list', this.data, config)
.then(() => {
// on save I want to be able to load the table again that is found in AttachmentList component
});
},
}
}
</script>
AttachmentList component code:
<template>
<div>
<tr v-for="attachment in attachments" :key="attachment.id">
<td>{{ attachment.name }}</td>
</tr>
</div>
</template>
<script>
export default {
data() {
return {
attachments: []
}
},
methods: {
getList() {
axios.get(`/list`)
.then((data) => {
this.attachments = data;
});
}
}
}
</script>
What I want to do is that I want to be able to load the table of the list when I click save in the other component (after the post request has completed). How will I be able to achieve this?
2 answers
solution1
1 ACCPTED 2020-05-08 05:49:51
Easiest way would be to have your FileManagement component emit an event which the parent can listen to, then trigger the AttachmentList#getList() method.
For example
// in AttachmentList
methods: {
async storeList () {
await axios.post('/list', this.data, config)
this.$emit('list-updated')
}
}
and in the parent template
<file-management @list-updated="$refs.list.getList()"></file-management>
<attachment-list ref="list"></attachment-list>
solution2
0 2020-05-08 05:49:34
This is how I would proceed.
- create a parent component for the siblings.
- add a boolean data member (flag) to it with the status of the clicked button.
- emit a signal from
FileManagementwhen the button is clicked. - catch this signal in the parent component to set the flag.
- pass this flag to the
AttachmentListcomponent as a prop. - use this flag inside a
v-ifto show / hide the the table.
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.