Класс переключения Vue JS для отдельных элементов, отображаемых с помощью v-for

Я использую директиву v-for для отображения списка.

<li v-for="group in groupList" :key="group.id" @dragenter="toggleClass ...."@dragleave="toggleClass ...." >

  Content

   </li>

Я хочу добавить класс к li, на котором запускается событие dragenter? Как я могу это сделать? Как мне получить ссылку на элемент (элемент, а не свойство данных родительского компонента) в первую очередь внутри дескриптора события? И даже если я получу ссылку, как переключить класс оттуда? Спасибо. Я знаю, что vue управляется данными, измените данные, чтобы они отражали DOM, но я хотел бы получить краткое решение для этого, а не index/Id для решений на основе модели данных. Спасибо.


javascript vue.js drag-and-drop v-for
person Sainath S.R    schedule 04.05.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете получить доступ к li, перетаскиваемому в обратном вызове dragenter, обратившись к event.currentTarget (или даже event.target в этом случае будет работать), где event — это параметр обратного вызова.

new Vue({
  el: '#app',
  data() {
    return {
      grouplist: [
        { id: 1, text: 'a' },
        { id: 2, text: 'b' },
        { id: 3, text: 'c' },
      ]
    }
  },
  methods: {
    onDragEnter(e) {
      e.currentTarget.classList.add('drag-enter');
    },
    onDragLeave(e) {
      e.currentTarget.classList.remove('drag-enter');
    }
  }
})
.drag-enter {
  background: #eee;
}
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <p draggable>Drag this text over the list items below</p>
  <ul>
    <li v-for="group in grouplist"
        :key="group.id"
        @dragenter="onDragEnter"
        @dragleave="onDragLeave">{{group.text}}</li>
  </ul>
</div>

person tony19    schedule 04.05.2018
comment
Да, но при использовании таких фреймворков, как vue, лучше всего позволить фреймворку обрабатывать манипуляции с DOM. Ничего, я нашел выход. Скоро опубликую здесь - person Sainath S.R; 04.05.2018