Как в Vue.js создать много new Object в v-for


Как в Vue.js создать много new Object в v-for

05.11.2019 09:47:14 Просмотров 63 Источник

Друзья, у меня есть компонент PlainDraggable (https://anseki.github.io/plain-draggable/), создаю его в DOM так:

<div id="draggable">Drag This</div>

потом в JS выполняю

new PlainDraggable(document.getElementById('draggable'));

Надо сделать несколько фигур, решил создать в Vue.js, в цикле. v-for:

    <div id="app">
        <div v-for="(item, index) in my_items" 
        :id='`draggable${item.id}`' 
        class="draggable" {{item.id}}
        </div>
    </div>

DOM создаётся, а как реализовать строку

new PlainDraggable(document.getElementById('draggableXXX'));

Ничего не получается. В updated() {} наверное надо цикл вставить, и создать все мои объекты PlainDraggable, но как это реализовать?
Заранее премного благодарен.

У вопроса есть решение - Посмотреть?

Ответы - Как в Vue.js создать много new Object в v-for / Как в Vue.js создать много new Object в v-for

Является ответом!
Дмытрык

05.11.2019 10:15:41

Вот так можно

class Person {
  constructor(name) {
    console.log(document.getElementById(name));
  }
}

const app = new Vue({
  el: '#app',
  template: `<div>
    <div v-for="(name, index) in names" 
      :id='name' 
      >{{createPerson(name)}} {{name}}</div> 
    </div>`,
  data() {
    return {
      names: ['Jhon', 'Mike', 'Kate']
    };
  },
  methods: {
    createPerson(name) {
      this.$nextTick(() => {
        new Person(name);
      });
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div id="app">  </div>

https://ru.stackoverflow.com/questions/1042739/%d0%9a%d0%b0%d0%ba-%d0%b2-vue-js-%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d1%82%d1%8c-%d0%bc%d0%bd%d0%be%d0%b3%d0%be-new-object-%d0%b2-v-for/1042749#comment1795442_1042749
наверное ответ был бы ещё более полезен, имея минимальные комментарии кода
Помочь в развитии проекта:
Закрыть X