v-for 루프에서 li 요소 하나가 클릭된 경우 VueJs가 활성 클래스를 설정함

v-for 루프에서 li 요소 하나가 클릭된 경우 VueJs가 활성 클래스를 설정함

v-for 루프를 수행할 때 하나의 클래스가 이미 선택되어 있을 때 활성 클래스를 올바르게 선택하는 방법(설정)을 알 수 없습니다.코드를 공유하고 자세한 설명과 함께

사용 가능한 구독이며 사용자 데이터에 따라 이미 선택되어 있습니다.

<ul>
    <li v-for="(s, key, index) in subscriptions"
        :class="checkIfClassActive(s.subscription_key)"
        @click="setActive(key, index)">
        {{ s.name }}
    </li>
</ul>

그리고 내 js 코드

checkIfClassActive(userSubscriptionKey) {
    if (userSubscriptionKey === this.userSubscription.subscription_key) {
        return 'active';
    }
},
setActive(key, index) {

},

그리고 이렇게 표시됩니다.

다음 단계는 1개의 li 요소를 클릭하면 활성화 되고 다른 모든 li 요소는 활성화 클래스가 손실되지만 setActive 함수를 올바르게 쓰는 방법을 알 수 없다는 것입니다.어떻게 하는지 좀 도와주실래요?

추가 정보가 필요하시면 알려주시면 알려드리겠습니다.감사해요!

를 추가합니다.data라고 하는 속성activeIndex:

  data() {
    return {
      activeIndex: undefined
    }
  },

그리고 당신의setActive방법:

  methods: {
    setActive(subscription, index) { 
      this.activeIndex = index;
      this.userSubscription.subscription_key = subscription.subscription_key
},
    getSubscriptions() {
       .....
       // fetch subscriptions in this.subscriptions var
       .....
       // select preselected subscription, when fetching subscriptions 
       let userSubscriptionKey = this.userSubscription.subscription_key;
       let indexOfObject = this.subscriptions.findIndex(
            o => o.subscription_key === userSubscriptionKey
       );
       this.setActive(this.userSubscription, indexOfObject);

    }
  }

템플릿을 약간 수정하면 다음과 같습니다.

<ul>
    <li v-for="(s, index) in subscriptions"
        :class="{ 'active': activeIndex === index }" :key="s.id"
        @click="setActive(s, index)">
        {{ s.name }}
    </li>
</ul>

기본적으로 활성화해야 할 인덱스를 설정하면 끝입니다. activecss 클래스는 목록 요소의 인덱스가 다음과 같을 때 추가됩니다.activeIndex.

설정에 대해서activeIndex사용자가 변경하기 전에 기존 선택으로 전환하여activeIndex사용자의 현재 구독으로 구독 데이터를 가져올 때.

바이올린: http://jsfiddle.net/eywraw8t/256701/

변경하다this.userSubscription.subscription_key탭이 선택될 때마다 변수를 선택합니다.이것을 위해 통과시켜라.setActive(s.subscription_key)이런 것도 할 수 있고

<li v-for="(s, key, index) in subscriptions"
        :class="checkIfClassActive(s.subscription_key)"
        @click="setActive(s.subscription_key)">
        {{ s.name }}
</li>

Js

checkIfClassActive(userSubscriptionKey) {
    if (userSubscriptionKey === this.userSubscription.subscription_key) {
        return 'active';
    }
},
setActive(subscription_key) {
    this.userSubscription.subscription_key=subscription_key;
},

이건 말도 안 돼

v-for를 사용하는 경우:

            <template>
                <div>
                    <ul>
                        <li 
                        class="anyThings"
                        v-for="cat in cats"
                        :key="cat.index"
                        @click="itemActive(cat.index)"
                        :class="[(itemA == cat.index) ? 'active':'']"
                        >{{ cat.yourObjectKey }}
                        </li>
                    </ul>
                </div>
            </template>

            <script>
                export default {
                    data() {
                        return {
                            itemA:'0' // for first load and in curent path
                        }
                    },
                    computed: {
                        cats() {
                            ...
                        }
                    },
                    methods: {
                        itemActive(e) {
                            this.itemA = e;
                        }
                    },

                }
            </script>

            <style>
                .active {
                    ...
                }
            </style>

요소에서 v-for 및 router-link를 사용할 필요가 없는 경우:

            <template>
                <div>
                    <ul>
                        <li @click="itemActive($route.path)">
                            <router-link to="/" class="anyThings" 
                            :class="[(itemA == '/') ? 'active':'']"
                            >your text
                            </router-link>  
                        </li>
                        <li @click="itemActive($route.path)">
                            <router-link to="/article" class="anyThings" 
                            :class="[(itemA == '/article') ? 'active':'']"
                            >your text
                            </router-link>  
                        </li>
                         .
                         .
                         .
                    </ul>
                </div>
            </template>

            <script>
                export default {
                    data() {
                        return {
                            itemA:this.$route.path // for first load and in curent path
                        }
                    },
                    methods: {
                        itemActive(e) {
                            this.itemA = e;
                        }
                    },

                }
            </script>

            <style>
                .active {
                    ...
                }
            </style>

논리를 보여주는 간단한 예:

html 부품:

<div id="app">
  <ul>
    <li 
    v-for="item in items"
    :key="item.id"
    :class="item.class"
    @click="set_active_id(item.id)"
    >{{ item.text }}</li>
  </ul>
</div>

Js 부품:

new Vue({
  el: "#app",
  data: {
    items: [
      { id: 1, text: 'text1', class: 'active' }, //default active
      { id: 2, text: 'text2', class: '' },
      { id: 3, text: 'text3', class: '' }
    ],
    previous_active_id: 1
  },
  methods: {
    set_active_id(id) {
      if (this.previous_active_id === id) return //no need to go further
      this.items.find(item => item.id === this.previous_active_id).class = '' //remove the active class from old active li
      this.items.find(item => item.id === id).class = 'active' //set active class to new li
      this.previous_active_id = id //store the new active li id
    }
  }
})

실제 상황 보기

언급URL : https://stackoverflow.com/questions/51774458/vuejs-set-active-class-when-one-li-element-clicked-in-v-for-loop