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

您的代码有几个问题：

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

注意：为了简化操作，我没有使用您的v-on:click="..."，而是使用数组，它不应该影响您如何理解一切是如何工作的。

＆＃13;

getPanels

＆＃13;

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
    }
  }
});

＆＃13;

.active {
    opacity: 0.7;
}

＆＃13;

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

1 个答案: