Vuejs Component Route Dynamic Selection

Question

I've got a Vue instance:

new Vue({
     el: '#Application',
     router: Router,
     components: { 'ExampleDepartment', Application },
     data: function() {
          return {

          }
     }
});

Inside of my application file, I import the template, sidebar action. Inside the template, I have the following:

<v-list-tile v-for="action in actions" :key="action.label" v-if="action.visibility == true">
     ...
</v-list-tile>

Then inside, I have the following:

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
                   }
               ]
          }
     }
}

So the issue, is every time the page switches I want to load a variation of menu items to the sidebar, but it won't let me modify the array. It complains that $set isn't valid or undefined, and it won't update the component on the change.

I can see that on the menu changes it executes my method through the watch, but fails when modifying the array.

How can I dynamically add to the menu based on selected page?

Answer 1

You are using the Vue.set method incorrectly.

It is available on a Vue instance via this.$set. It should look like this:

this.$set(this.actions[index], 'visibility', true);