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

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

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

Answer 1

您正在使用Vue.set方法错误。

它可以通过 this.$set 在 Vue 实例上使用。它应该看起来像这样:

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