I need multiple empty arrays and some predefined objects to go with a component. The below format for data object works for me. But I am unable to figure out if this is the right pattern and if it could have any other consequences.
Below is a partial code from a vue component I wrote.
<template>
//html
</template>
<script>
export default {
name: "SomeComponent",
data() {
let dates = []
let open = []
let closed = []
let replied = []
let option = {
title: {
text: "Summary",
},
tooltip: {
trigger: "axis",
},
legend: {
data: [{
name: "Open",
icon: "circle"
},
{
name: "Closed",
icon: "circle"
},
{
name: "Replied",
icon: "circle"
},
],
}
}
return {
dates,
open,
closed,
replied,
option,
theme,
}
},
}
</script>
You could dynamically generate it by iterating on it.
It will maybe make it more readable but also more complex.
That kind of pattern is not something shocking to me.
Meanwhile, I recommend more of something like this
<script>
export default {
data() {
return {
dates: [],
open: [],
closed: [],
replied: [],
option: {
title: {
text: 'Summary',
},
tooltip: {
trigger: 'axis',
},
legend: {
data: [
{
name: 'Open',
icon: 'circle',
},
{
name: 'Closed',
icon: 'circle',
},
{
name: 'Replied',
icon: 'circle',
},
],
},
},
}
},
}
</script>
The return inside of data written like that is important and also more readable (more on how you can find it in the documentation too).
Also, that way you will get all of your state reactive down the road if you mutate it with a method or alike.