Create mount helper for Vue applications in HAML
When mounting Vue applications, we often have the following pattern in our frontend code:
new Vue({
data: {
boardsEndpoint: $boardApp.dataset.boardsEndpoint,
listsEndpoint: $boardApp.dataset.listsEndpoint,
boardId: $boardApp.dataset.boardId,
disabled: parseBoolean($boardApp.dataset.disabled),
issueLinkBase: $boardApp.dataset.issueLinkBase,
rootPath: $boardApp.dataset.rootPath,
bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
detailIssue: boardsStore.detail,
defaultAvatar: $boardApp.dataset.defaultAvatar,
}
})
However the root component already knows which data it expects from the dataset
:
export default {
props: {
list: {
type: Object,
default: () => ({}),
},
disabled: {
type: Boolean,
required: true,
},
issueLinkBase: {
type: String,
required: true,
},
rootPath: {
type: String,
required: true,
},
boardId: {
type: String,
required: true,
},
},
}
We should take advantage of this and create a helper that automatically passes everything from dataset that is defined in props
.