My Vue instance looks like this:
new Vue({
el: '#Application',
router: Router,
components: { 'ExampleDepartment', Application },
data: function() {
return {
}
}
});
In my application file, I include the template sidebar action. Inside the template, it contains the following:
<v-list-tile v-for="action in actions" :key="action.label" v-if="action.visibility == true">
...
</v-list-tile>
And inside, there is the code snippet below:
export default {
watch: {
$route: function() {
this.getOrSetPageVisibility();
}
},
methods: {
getOrSetPageVisibility() {
for(let index = 0; index < this.actions.length; index++) {
if(this.actions[index].page == this.$router.currentRoute.name) {
this.actions.$set(index, { visibility }, true);
}
}
}
},
data: function() {
return {
actions: [
{
label: 'Add Sample',
icon: 'add_circle',
page: 'Sample',
visibility: false
}
]
}
}
}
The problem lies in updating the menu items dynamically when the page switches. Despite executing my method through the watch as the menu changes, I encounter an issue modifying the array. The error message indicates that $set is either invalid or undefined, preventing the component from being updated upon change.
Although I can see that my method runs when the menu changes, it fails to modify the array successfully.
I am seeking a solution on how to add menu items dynamically based on the selected page.