Vuejs 组件路由动态选择

Posted 2023-02-16

【中文标题】Vuejs 组件路由动态选择

【英文标题】：Vuejs Component Route Dynamic Selection

【发布时间】：2018-01-31 06:13:21

【问题描述】：

我有一个 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 无效或未定义，并且不会在更改时更新组件。

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

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

【问题讨论】：

$set 是 Vue 上可用的函数，而不是您的数据属性 actions。应该是this.$set。

【参考方案1】：

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

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

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

【讨论】：

哦，有道理。对文档感到困惑。