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

Question

我现在有点卡住了，试图弄清楚如何在循环内激活当前单击的元素。基本上我只想更改该项目的一些 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;
}

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

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