Vuejs 组件路由动态选择

Question

我有一个 Vue 实例：

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

          }
     }
});

在我的应用程序文件中，我导入了模板、侧边栏操作。在模板中，我有以下内容：

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

然后在里面，我有以下内容：

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

所以问题是，每次页面切换时，我都想将菜单项的变体加载到侧边栏，但它不允许我修改数组。它抱怨 $set 无效或未定义，并且不会根据更改更新组件。

我看到在menu changes上通过watch执行了我的方法，但是在修改array的时候失败了。

如何根据所选页面动态添加到菜单？

Answer 1

您使用的 Vue.set 方法不正确。

它可以通过 this.$set 在 Vue 实例上使用。它应该是这样的：

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

Vuejs 组件路由动态选择

Vuejs Component Route Dynamic Selection

javascript

vue.js

vue-router

vue-component

vuejs2