перетаскиваемый vue - как получить доступ к "столбцу" id? - PullRequest
Новая
       40

перетаскиваемый vue - как получить доступ к "столбцу" id?

0 голосов
/ 25 сентября 2018

Прямо сейчас я пытаюсь использовать draggable для создания канбана (с четырьмя столбцами).Я начал создавать два столбца, чтобы узнать о vue-draggable , но не могу понять, как получить доступ к столбцу задачи.

Мои первые два столбца: 

<draggable v-model="myArray" class="simple-a" 
  :options="{group:'people'}" :move="onMove" 
  @start="changeDrag" @end="changeDrag" 
  @change="seeChange">
  <div v-for="(element, aIndex) in myArray" :key="aIndex" class="element-a">
      {{ element.name }}
    </div>
</draggable>

<draggable v-model="myArray2" class="simple-a" style="background:red;" 
  :options="{group:'people'}" :move="onMove" @start="changeDrag" 
  @end="changeDrag" @change="seeChange(1)">
  <div v-for="(element2, aIndex) in myArray2" :key="aIndex" class="element-a">
    {{ element2.name }}
  </div>
</draggable>

Я использую функцию seeChange, чтобы узнать, какой элемент изменился: 

seeChange({moved, added, removed}, col) {
  if(added){
    console.log(added);
    console.log('column: '+col);
  }
  if(moved){
    console.log(moved);
  }
  if(removed){
    console.log(removed);
  }
}

Как вы можете видеть, я пытаюсь передать атрибут col этой функции (событие change), но я не могу 'т, всегда undefined.

Как передать атрибут событию изменения vue draggable?
Или как правильно / лучше получить новый столбец редактируемого элемента?

1 Ответ

0 голосов
/ 26 сентября 2018

Синтаксис, необходимый для передачи дополнительных параметров обработчику событий:

template 

<draggable ... @change="seeChange($event, 1)">
  ...
</draggable>

component 

methods: {
  seeChange(event, col) {
    console.log(event, col)
    ...
  }
},

Ссылка: Передача события и аргумента v-on в Vue.js

...