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无效或未定义，并且不会更新组件。

我可以看到在菜单上更改它通过监视执行我的方法，但在修改数组时失败。

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

Answer 1

您错误地使用了Vue.set方法。

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

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

Vuejs组件路径动态选择

1 个答案: