Question

我正在尝试访问计算属性中的锚元素，以确定是应该将其设置为活动状态还是保持原样。

我已经看到了使用v-for和遍历数据属性的示例，但这是一个静态菜单，如下所示：

<template>
<div class="panel panel-default">
    <div class="panel-heading">Application Menu</div>
    <ul class="list-group">
        <a :href="route('applications.index')" 
           :class="activeClass" 
           class="list-group-item">Applications</a>
        <a :href="route('applications.repository')" 
           :class="" 
           class="list-group-item">Token Repository</a>
        <a :href="route('applications.notifications')" 
           :class="" 
           class="list-group-item">Notifications</a>
    </ul>
</div>
</template>

我的activeClass计算的道具会将当前锚点的href与浏览器的当前位置进行比较，如果匹配则返回active。

我已经查阅了Vue网站上的所有文档，并广泛地在Google上进行了搜索，但是我还没有找到访问调用计算属性的锚点的href属性的方法。

Answer 1

您不能这样做，这就是原因。计算属性应该是通用的。也就是说，它的 value 并不由谁访问它来确定。如果您从方法内部访问this.activeClass，则其值应与模板内部的activeClass相同，并假设其依赖的状态信息相同。（谁正在访问它不是状态信息）

如果您正在使用Vue-Router，则可以只比较$ route.path的值并使用其他类。例如：

<a :href="route('applications.index')" 
   :class="$route.path === 'whatever' ? 'active-class' : 'inactive-class'">Applications</a>

Answer 2

您正在考虑错误。您不应试图像访问数据一样访问DOM元素的属性。 DOM不是数据存储。数据应该在您的视图模型中，并在DOM中使用。

您应该有一系列描述您的物品的对象。（此外，ul的唯一允许孩子是li。）您可以执行以下操作：

<ul class="list-group">
    <li v-for="item in menuItems">
      <a :href="item.route" 
         :class="isActive(item)" 
         class="list-group-item">{{model.label}}</a>
    </li>
</ul>

如果您希望有一个computed适用于您的每个商品，则需要为每个商品制作一个组件。参见vuejs using computed property for array elements

Answer 3

最终解决方案：

<template>
<div class="panel panel-default">
    <div class="panel-heading">Application Menu</div>
    <ul class="list-group">
        <a :href="route('applications.index')" 
           :class="activeClass('applications')" 
           class="list-group-item">Applications</a>
        <a :href="route('applications.repository')" 
           :class="activeClass('repository')" 
           class="list-group-item">Token Repository</a>
        <a :href="route('applications.notifications')" 
           :class="activeClass('notifications')" 
           class="list-group-item">Notifications</a>
    </ul>
</div>
</template>

<script>

export default {
    data () {
        return {
            currentLink: location.href,
        }
    },
    computed: {
        routes() {
            return window.routes
        },
    },
    mounted() {
        this.setCurrentLink()
    },
    methods: {
        route(url) {
            return this.routes.route(url)
        },
        activeClass(segment) {
            return segment == this.currentLink ? 'active' : ''
        },
        setCurrentLink() {
            this.currentLink = new URL(location.href).pathname.split('/').pop();
        }
    }
}
</script>

完美工作，而无需遍历循环。我称这是一种罕见的用例，但对于小巧而静态的应用来说，它就很合适。

感谢所有贡献者。

在Vue中的菜单上创建活动类

3 个答案: