하위 항목 vueJ 간에 "활성" 클래스를 전환합니다.2

하위 항목 vueJ 간에 "활성" 클래스를 전환합니다.2

vue.js 방식으로 하는 방법을 알고 싶을 뿐인데, 지금은 전환할 수 있습니다.active다른 항목을 클릭했을 때,activeclass는 이전 항목에 계속 표시됩니다.내 설정은 다음과 같습니다.

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(자컴포넌트)

// When I click each Item the `active` class should be applied to the current Item and removed from previous item:
<template>
  <li :class="{'active': isRowActive}" @click.stop="toggleRowActive">
    <h1>{{articleTitle}}</h1>
    <p>{{itemContent}}</p>
  </li>
</template>

<script>  
  export default {
    name: 'my-list-item',
    data: function () {
      return {
        isRowActive: false,
      }
    },
    props: {
      articleTitle: String,
      articleContent: String,
    },
    toggleRowFn() {
      this.isRowActive = !this.isRowActive;
      this.showBtnReadContent = true;
    },
  }
</script>

보통 스토어(Vuex)나 데이터(컴포넌트)에 액티브 아이템의 ID를 저장합니다.active id가 item 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>

따라서 비활성 항목에서 클래스를 제거할 필요가 없습니다.

생각할 수 있는 해결책 중 하나:https://jsfiddle.net/wostex/63t082p2/28/

요점은 자녀 상태를 부모 상태에서 벗어나게 하려면 자녀로부터 '속성 변경' 이벤트를 내보내고 부모 내부에서 계산을 처리해야 한다는 것입니다.이 예에서는 활성 Li 인덱스를 부모 데이터 내에 저장하고 자녀에게 Boolean 속성을 보냅니다.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사용하시는 경우 하위 컴포넌트 자체에 사용됩니다.자신의 예에서는, 많은 데이터를 생성했습니다.ul일반 태그가 아닌 태그li항목들.

언급URL : https://stackoverflow.com/questions/43511862/toggle-active-class-between-child-items-vuejs-2