突出显示所选组件VueJS

我正在Vue文件中工作，而我想要的是突出显示活动元素，将会完成它的最佳方法是什么？代码突出显示所选组件VueJS

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

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

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

因此，可以说第一个 “礼” 元素被选中 - >以 “礼”，如果另外一个选择它应该给红色背景，它必须重置第一个元素并将红色背景分配给新选定的元素。

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

来源

2017-02-19 Stan

您想在选择元素的文本或点击时添加红色背景吗？ – NotABlueWhale

现在只是一个点击。 – Stan

你可以这样做。

<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; 
}

来源

2017-02-19 12:36:44 NotABlueWhale

它由于某种原因只能使用一次。我按第一个，但是当我尝试去另一个它说（不能读属性'classList'的undefined） – Stan

它可以从任何3个开始，但是一旦你选择了一个，你不能切换到另一个没有刷新页面 – Stan

这可能是由于我的'activeLink'输入错误。 – NotABlueWhale

突出显示所选组件VueJS

回答

相关问题