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

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

0 голосов
/ 04 мая 2018

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

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

  Content

   </li>

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

1 Ответ

0 голосов
/ 04 мая 2018

Вы можете получить доступ к перетаскиваемому 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/vue@2.5.16"></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>
...