Переключить" активный " класс между дочерними элементами vueJS.Два

Я просто хочу знать, как это сделать vue.JS way, прямо сейчас я могу переключать active класс на одном элементе, когда я нажимаю другой элемент,active класс по-прежнему отображается на предыдущем элементе, вот моя настройка:

FileOne.вю (родительский компонент)

// 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.вю (дочерние компоненты)

// 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>
7
vue.js vuejs2

2 ответов

одно из возможных решений: 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 используется на ребенка сам компонент в вашем случае. В вашем собственном примере вы создали кучу ul теги вместо li предметы.

9

обычно я сохраняю идентификатор активного элемента в хранилище (Vuex) или данные (в компоненте). Когда активный идентификатор равен идентификатору элемента, я устанавливаю связанный класс, как показано ниже.

в свойстве data:

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>

поэтому мне не нужно удалять класс из неактивных элементов.

10