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（子组件）

// 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>

Answer 1

我通常在商店（Vuex）或数据（在组件中）保存活动项目的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>

所以我不需要从非活动项目中删除该课程。

Answer 2

可能的解决方案之一：https://jsfiddle.net/wostex/63t082p2/28/

主要思想：如果你想处理父状态以外的子状态，你应该从子进行'change property'事件并处理父进程内的计算。在我的示例中，我将活动Li索引存储在父数据中，如果当前索引处于活动状态，则发送子布尔属性<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代码而非常规class Plugin extends PluginBase { public function pluginDetails() { [..] } public function boot() { // extend the blog navigation Event::listen('backend.menu.extendItems', function($manager) { $manager->addSideMenuItems('RainLab.Blog', 'blog', [ 'tags' => [ 'label' => 'bedard.blogtags::lang.navigation.tags', 'icon' => 'icon-tags', 'code' => 'tags', 'owner' => 'RainLab.Blog', 'url' => Backend::url('bedard/blogtags/tags') ] ]); }); }项。

在子项vueJS.2之间切换“活动”类

2 个答案: