单击时激活 v-for 循环内的项目答案

【问题标题】：Active a item inside a v-for loop when clicked单击时激活 v-for 循环内的项目
【发布时间】：2018-02-01 06:04:35
【问题描述】：

此刻我有点卡住，试图弄清楚如何在循环中激活当前点击的元素。基本上我只想为那个项目更改一些 CSS，例如opacity，并知道我在循环内实际点击的位置（我认为这个我可以用onclick 处理）。

所以基本上我尝试了这个：

<div class="panel panel-default">
    <ul class="list-group">
        <li :style="panel.color" v-for="(panel,key,index)in getPanels"
            :class="{active: panel === activeItem}" class="list-group-item"
        >
            A section {{panel.section}} was {{panel.action}}
        </li>
    </ul>
</div>

data() {
    return {
        activeItem: null
    }
},

.active {
    opacity: 0.7;
}

活动类未应用于特定的单击项目。出了什么问题——谁能帮忙？

【问题讨论】：

VueJS Toggle class to specific element in table的可能重复
设置activeItem = panel的@click事件在哪里？

标签： javascript vue.js vuejs2

【解决方案1】：

您的代码有几个问题：

而不是:style="panel.color"，你应该放入一个对象，所以它应该是:style="{ color: panel.color }"
您忘记添加点击处理程序，即您应该添加v-on:click="..."

注意：为简化起见，我没有使用您的getPanels，而是使用了数组，它不应该影响您对一切工作原理的理解。

const app = new Vue({
  el: '#app',
  data: {
    panels: [
      {section: 'One', action: 'Action 1', color: 'red' },
      {section: 'Two', action: 'Action 2', color: 'blue' },
      {section: 'Three', action: 'Action 3', color: 'green' },
      {section: 'Four', action: 'Action 4', color: 'orange' },
      {section: 'Five', action: 'Action 5', color: 'purple' }
    ],
    activeItem: -1
  },
  methods: {
    clickHandler(idx) {
      this.activeItem = idx
    }
  }
});

.active {
    opacity: 0.7;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  
  <div class="panel panel-default">
    <ul class="list-group">
      <li 
        class="list-group-item"
        v-for="(panel, index) in panels"
        :class="{active: index === activeItem}" 
        :style="{ color: panel.color }"
        v-on:click="clickHandler(index)"
      >
        A section {{panel.section}} was {{panel.action}}
      </li>
    </ul>
  </div>

</div>

【讨论】：