Байндинг классов vue

266

12 января 2019, 22:20

У меня есть вот такая верстка

  <div v-for="(item, index) in photo"
             :key="index"
             class="item"
        >
            <div
              class="img-container"
              @drop.prevent.stop="ondrop($event, item)"
              @dragover.prevent.stop="ondragover"
              @dragleave.prevent.stop="ondragleave"
            >
            </div>
          </div>

и есть

methods:{
 ondragover(event) {
      event.currentTarget.classList.add('holder--dragover');
    },
    ondragleave(event) {
      event.currentTarget.classList.remove('holder--dragover');
    }
}

Как сделать чтобы не вешать явно класс а использовать байндинг классов

Answer 1

У вас итемы выводятся через v-for, то значит что для каждого можно хранить состояние о drag'n'drop, если это состояние true, то давать класс.

<div v-for="(item, index) in photo"
  :key="index"
  class="item"
>
    <div
      :class="{ 'img-container': true, 'holder--dragover': item.drag }"
      @drop.prevent.stop="ondrop($event, item)"
      @dragover.prevent.stop="item.drag = true"
      @dragleave.prevent.stop="item.drag = false"
    >
  </div>
</div>