VueJS: updated through use of props.
better use of vue props
MODIFY
templates/Web/Pages/Vue.Grid/src/components/GridComponent.vue
templates/Web/Pages/Vue.Grid/src/components/GridComponent.vue
export default {
name: "GridComponent",
props: {
- header: String,
- description: String
+ header: {
+ type: String,
+ required: true
+ },
+ description: {
+ type: String,
+ required: true
+ }
}
};
</script>

MODIFY
templates/Web/Pages/Vue.Grid/src/views/VueGrid.vue
templates/Web/Pages/Vue.Grid/src/views/VueGrid.vue
@@ -50,8 +50,8 @@ export default {
return {
gridTextAssets: [
{
- description: "",
- header: "",
+ shortDescription: "",
+ title: "",
id: 0
}
],

MODIFY
templates/Web/Pages/Vue.List/src/components/ListForm.vue
templates/Web/Pages/Vue.List/src/components/ListForm.vue
export default {
name: "ListForm",
props: {
- value: String
+ value: {
+ type: String,
+ required: true
+ }
}
};
</script>

MODIFY
templates/Web/Pages/Vue.List/src/components/ListItem.vue
templates/Web/Pages/Vue.List/src/components/ListItem.vue
export default {
name: "ListItem",
props: {
- listItem: Object
+ listItem: {
+ type: Object,
+ required: true,
+ validator: function(value) {
+ return value.text !== undefined && value._id !== undefined;
+ }
+ }
}
};
</script>

MODIFY
templates/Web/Pages/Vue.MasterDetail/src/components/MasterDetailPage.vue
templates/Web/Pages/Vue.MasterDetail/src/components/MasterDetailPage.vue
export default {
name: "MasterDetailPage",
props: {
- textSampleData: Object
+ textSampleData: {
+ type: Object,
+ required: true,
+ validator: function(value) {
+ return (
+ value.id !== undefined &&
+ value.longDescription !== undefined &&
+ value.orderDate !== undefined &&
+ value.orderTotal !== undefined &&
+ value.shipTo !== undefined &&
+ value.status !== undefined &&
+ value.title !== undefined
+ );
+ }
+ }
}
};
</script>

MODIFY
templates/Web/Pages/Vue.MasterDetail/src/components/MasterDetailSideBarTab.vue
templates/Web/Pages/Vue.MasterDetail/src/components/MasterDetailSideBarTab.vue
export default {
name: "MasterDetailSideBarTab",
props: {
- tabText: String,
- index: Number
+ tabText: {
+ type: String,
+ required: true
+ },
+ index: {
+ type: Number,
+ required: true
+ }
}
};
</script>

MODIFY
templates/Web/Pages/Vue.MasterDetail/src/views/VueMasterDetail.vue
templates/Web/Pages/Vue.MasterDetail/src/views/VueMasterDetail.vue
@@ -43,10 +43,13 @@ export default {
return {
masterDetailText: [
{
- paragraph: "",
- title: "",
- tabName: "",
- id: 0
+ id: 0,
+ longDescription: "",
+ orderDate: "",
+ orderTotal: 0,
+ shipTo: "",
+ status: "",
+ title: ""
}
],
currentDisplayTabIndex: 0,

MODIFY
templates/Web/_composition/Vue/Page.Vue.AddWarnings/src/components/WarningMessage.vue
templates/Web/_composition/Vue/Page.Vue.AddWarnings/src/components/WarningMessage.vue
export default {
name: "WarningMessage",
props: {
- text: String
+ text: {
+ type: String,
+ required: true
+ }
}
};
</script>

VueJS: updated through use of props. (#1029)

better use of vue props