선택한 구성 요소 강조 표시 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 스타일을 추가하십시오 (예 :

)

출처

2017-02-19 12:36:44 NotABlueWhale

그것은 어떤 이유로 든 한 번만 작동합니다. 나는 첫 번째 언론,하지만 내가 다른 하나에 가서하려고하면 (정의되지 않은 'classList'속성을 읽을 수 없습니다) – Stan

그 3 중 하나에서 시작할 수 있지만 한 번 당신이 하나를 선택하면, 페이지 새로 고침 – Stan

아마도 내 끝에있는'activeLink'의 오타 때문일 것입니다. – NotABlueWhale

선택한 구성 요소 강조 표시 VueJS

답변

관련 문제