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

【问题标题】：Creating Active Class on Menu in Vue在 Vue 中的菜单上创建活动类
【发布时间】：2019-03-19 04:46:35
【问题描述】：

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

我见过使用 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 网站上的所有文档并进行了广泛的谷歌搜索，但我还没有找到一种方法来访问调用计算属性的锚的 href 属性。

【问题讨论】：

标签： laravel vue.js vue-component

【解决方案1】：

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

如果您使用的是 Vue-Router，您可以只比较 $route.path 的值并使用不同的类。例如：

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

【讨论】：

【解决方案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

【讨论】：

我可以轻松地将其切换到开发人员，或者在 chrome 中呈现相同的内容。此外，这里没有模型，它是一个基本的 Laravel 部分，它呈现一个 vue 组件。不过还是谢谢。

【解决方案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>

无需遍历循环即可完美运行。我称这是一个罕见的用例，但对于一些小而静态的东西，它符合要求。

感谢所有贡献的人。

【讨论】：