如何在循环中绑定样式点击

Question

我有一个对象（项目）数组，可以随其他项目递增，我通过循环进入数组来显示它们。

参见：

并且我想在单击某个项目时突出显示它（例如：另一种边框顶部颜色），但是我无法定位一个特定元素并应用一种样式而不将样式应用于整个数组。有什么想法吗？

模板,我用的是vuedraggable，不用介意:

<template #item="{ element }">
          <div
            class="item"
            :key="element"
            @click="
              messageItemTitle(element.title);
              messageItemID(element.id);
              "
          >
            <div class="item-title">
              {{ element.title }}
            </div>
            <div class="item-subType">
              {{ element.type }}
            </div>            
            
          </div>
</template>

脚本 : 好吧，none 我之前编写的代码有效，所以这里只有数据 :

data() {
    return {
      dragItems: dragItemsList, //15 items that I can clone into dropItems 
      dropItems: [],            //Array where I can add the items from dragItems
    };
  },

Answer 1

您可以有条件地申请class：

const app = Vue.createApp({
  data() {
    return {
      items: [{id:1, title: 'aaa', type: 'type1'}, {id:2, title: 'bbb', type: 'type2'}, {id:3, title: 'ccc', type: 'type3'}],
      selected: null
    };
  },
  methods: {
    message(el) {
      this.selected = el.id
    }
  }
})
app.mount('#demo')

.item {
  border: 3px solid transparent;
  border-top-color: black;
}
.selected {
  border-top-color: green;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(element, i) in items" :key="i">
    <!--<template #item="{ element }">-->
          <div
            class="item"
            :class="selected === element.id && 'selected'"
            :key="element"
            @click="message(element)"
          >
            <div class="item-title">
              {{ element.title }}
            </div>
            <div class="item-subType">
              {{ element.type }}
            </div>            
            
          </div>
    <!--</template>-->
  </div>
</div>

如何在循环中绑定样式点击

How to bind style on-click in a loop

javascript

css

loops

vue.js

vuejs3