突出显示选定的组件 VueJS答案

【问题标题】：Highlight selected components VueJS突出显示选定的组件 VueJS
【发布时间】：2017-02-19 12:11:21
【问题描述】：

我在 Vue 文件中工作，我想要突出显示活动元素，实现它的最佳方法是什么？代码

<li @click = "selectedComponent = 'appBugs1'">Test 1</li>

<li @click = "selectedComponent = 'appBugs2'">Test 2</li>

<li @click = "selectedComponent = 'appBugs3'">Test 3</li>

假设第一个“li”元素被选中 -> 它应该为“li”赋予红色背景，如果选择了另一个元素，它必须重置第一个元素并将红色背景分配给新选择的元素。

我尝试在网络上搜索，但没有太多内容，如果您只有 2 个选项会很容易，但我的列表要大得多。那么解决这个问题的最佳方法是什么？

【问题讨论】：

元素的文本被选中或被点击的时候是否要加红色背景？
现在只是一个点击。

标签： html vue.js

【解决方案1】：

你可以这样做。

<li @click = "selectComponent('appBugs1', $event)"><i class="ion-bug"></i>Test 1</li>

<li @click = "selectComponent('appBugs2', $event)"><i class="ion-bug"></i>Test 2</li>

<li @click = "selectComponent('appBugs3', $event)"><i class="ion-bug"></i>Test 3</li>

添加如下方法：

selectComponent: function(component, event){
  if(this.activeLink){
      this.activeLink.classList.remove('highlight');
  }
  this.activeLink = event.target;
  this.activeLink.classList.add('highlight');

  this.selectedComponent = component;

};

还有属性 activeLink。然后添加您的 css 样式，例如：

.highlight{
    background-color: yellow;
}

【讨论】：

由于某种原因它只能工作一次。我按第一个，但是当我尝试转到另一个时，它说（无法读取未定义的属性'classList'）
它可以从这3个中的任何一个开始，但是一旦你选择了一个，你就不能在不刷新页面的情况下切换到另一个
这可能是因为我在activeLink 中的拼写错误。