如何在兄弟提交上呈現 vuejs 組件
[英]How to render vuejs component on sibling submit
問題描述
我有以下代碼
<body>
<div class="content" id="app">
<file-management></file-management>
<attachment-list></attachment-list>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
文件管理組件代碼：
<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>
附件列表組件代碼：
<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>
我想要做的是，當我在另一個組件中單擊保存時（在發布請求完成后），我希望能夠加載列表的表格。 我將如何實現這一目標？
2 個解決方案
解決方案1
1 已采納 2020-05-08 05:49:51
最簡單的方法是讓您的FileManagement組件發出一個父級可以監聽的事件，然后觸發AttachmentList#getList()方法。
例如
// in AttachmentList
methods: {
async storeList () {
await axios.post('/list', this.data, config)
this.$emit('list-updated')
}
}
並在父模板中
<file-management @list-updated="$refs.list.getList()"></file-management>
<attachment-list ref="list"></attachment-list>
解決方案2
0 2020-05-08 05:49:34
這就是我將如何進行。
- 為兄弟姐妹創建父組件。
- 添加一個 boolean 數據成員（標志）到它與單擊按鈕的狀態。
- 單擊按鈕時從
FileManagement發出信號。 - 在父組件中捕獲此信號以設置標志。
- 將此標志作為道具傳遞給
AttachmentList組件。 - 在
v-if中使用這個標志來顯示/隱藏表格。
同級組件通信vuejs 2
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.