我有一个 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 执行我的方法,但在修改数组时失败。
如何根据所选页面动态添加到菜单?
最佳答案
您正在使用Vue.set
方法错误。
它可以通过 this.$set
在 Vue 实例上使用。它应该看起来像这样:
this.$set(this.actions[index], 'visibility', true);
关于javascript - Vuejs组件路由动态选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45826430/