자식 항목 사이에 "활성"클래스 전환 vueJS.2

Question

그냥 vue.js 방법을 알고 싶습니다. 다른 항목을 클릭하면 active 클래스를 토글 할 수 있습니다. active

FileOne.vue (부모 요소)

// Say that I have 5 Items I am rendering here: 
<template> 
    <ul v-for="item in items"> 
    <my-list-item :item-title="article.title" 
        :item-content="article.content"> </my-list-item> 
    </ul> 
</template> 

<script> 
    import Items from './FileTwo' 
    export default {} 
</script> 

fileTwo.vue (하위 구성 요소)

0 : 클래스는 여전히 이전 항목에 표시, 여기 내 설정이다

Answer 1

하나 : https://jsfiddle.net/wostex/63t082p2/28/

주요 아이디어 : 당신이 아이들을 처리하려면 부모 상태에서 상태, 당신은 아이에서 '변화 속성'이벤트를 방출하고 부모 내부 계산을 처리해야합니다. 예제에서는 부모 인덱스에 활성 Li 인덱스를 저장하고 현재 인덱스가 활성 상태이면 자식 부울 속성 active을 보냅니다. 또한

<script src="https://unpkg.com/vue/dist/vue.js"></script> 

<div id="app"> 
<ul> 
    <my-list-item :title="item.title" 
     :content="item.content" 
     v-for="(item, index) in items" 
     :active="index === activeLiIndex" 
     :index="index" 
     :key="item.title" 
     @newactive="activeLiIndex = $event"  
     ></my-list-item> 
</ul> 
</div> 

<script type="text/x-template" id="my-list-item"> 
    <li :class="{'active': active}" @click.stop="toggleRowActive"> 
    <h1>{{title}}</h1> 
    <p>{{content}}</p> 
    </li> 
</script> 

new Vue({ 
    el: '#app', 
    data: { 
     items: [ 
     {title: 'Title 1', content: 'Content 1'}, 
     {title: 'Title 2', content: 'Content 2'} 
     ], 
     activeLiIndex: null 
    }, 
    components: { 
    'my-list-item': { 
     template: '#my-list-item', 
     props: ['title', 'content', 'active', 'index'], 
     methods: { 
      toggleRowActive() { 
      this.$emit('newactive', this.index); 
      } 
     } 
     } 
    } 
}); 

, 당신이 볼 수 있듯이, v-for은 귀하의 경우 하위 구성 요소 자체에 사용됩니다. 자신의 예에서는 보통 li 개 대신 ul 개 태그를 생성했습니다.

Answer 2

일반적으로 저장소 (Vuex) 또는 데이터 (구성 요소)에 활성 항목의 ID를 저장합니다. 활성 ID가 항목 ID와 같을 때, 아래 예제와 같이 관련 클래스를 설정합니다. 데이터 속성에

:

data: function() { 
    return { 
    activeItemId: '' 
    } 
} 

의 방법 :

setActiveItemId(itemIndex) { 
    this.activeItemId = itemIndex 
} 

템플릿 부분 :

<ul class="ready-design"> 
<li class="ready-design__item" v-for="(item, itemIndex) in clipArts"> 
    <a href="javascript:void(0);" 
     class="ready-design__link" 
     :class="{'is-chosen': activeItemId === itemIndex}" 
     @click="setActiveItemId(itemIndex)"> 
     <img class="..." width="70" height="70" alt="..." src="..."> 
    </a> 
</li> 
</ul> 

그래서 내가 비활성 항목에서 클래스를 제거 할 필요가 없습니다. 가능한 해결책의