Я пытаюсь интегрировать компонент vueDraggable в свой проект на Vue 3, который написан на PHP и не использует сборщики. Я подключаю Draggable через CDN, как показано ниже:
<br/>
<pre><code class="html"><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-draggable@2.0.9/dist/vue3-draggable.umd.min.js"></script></code></pre>
<br/>
Затем я добавляю компонент и монтирую приложение:
<br/>
<pre><code class="javascript">const app = Vue.createApp({});
app.component('draggable', window['vue3-draggable']);
app.mount('#app');</code></pre>
<br/>
Однако, когда я пытаюсь использовать компонент, появляется следующая ошибка:
<br/>
<pre><code>vue.global.js:2260 [Vue warn]: Component is missing template or render function: Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 'Module'}default: components: DraggableItem: name: "DraggableItem"props: {item: ƒ, position: ƒ, containerId: ƒ}containerId: ƒ Number()item: ƒ Object()position: ƒ Number()[[Prototype]]: Objectrender: ƒ (t,e,n,r,o,i)length: 6name: ""prototype: {}arguments: (…)caller: (…)[[FunctionLocation]]: vue3-draggable.umd.min.js:1[[Prototype]]: ƒ ()[[Scopes]]: Scopes[4]setup: ƒ (t,e)__scopeId: "data-v-2fc82866"[[Prototype]]: Object[[Prototype]]: Objectcomputed: {transitionStyle: ƒ}name: "Draggable"props: {transition: {…}, modelValue: ƒ}render: ƒ (t,e,n,r,o,i)setup: ƒ (t,e)__scopeId: "data-v-2fb1486c"[[Prototype]]: Object__esModule: trueSymbol(Symbol.toStringTag): "Module"[[Prototype]]: Object
at <Draggable modelValue= (5) [{…}, {…}, {…}, {…}, {…}] onUpdate:modelValue=fn<onUpdate:modelValue> item-key="id" >
at <EstateEditGallery>
at <EstateEdit key="estate-edit" >
at</code></pre>
Как мне исправить эту ошибку и правильно использовать компонент в своем проекте?
Для интеграции компонента `vue3-draggable` в проекте на Vue 3 без использования сборщиков и с помощью CDN, следует учитывать, что сам компонент может экспортироваться с некоторыми особенностями, которые необходимо учесть при его регистрации. Чтобы исправить ошибку, вы можете попробовать следующий подход.
### Пример интеграции VueDraggable
1. **Подключите необходимые скрипты через CDN**:
```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-draggable@2.0.9/dist/vue3-draggable.umd.min.js"></script>
```
2. **Создайте шаблон Vue**:
Добавьте HTML-элемент, который будет являться контейнером для вашего приложения Vue.
```html
<div id="app">
<draggable v-model="items" item-key="id" @update:modelValue="updateItems">
<template v-slot="{ item }">
<div class="item">{{ item.name }}</div>
</template>
</draggable>
</div>
```
3. **Инициализируйте Vue приложение**:
Настройте ваше приложение Vue, зарегистрируйте компонент `draggable` и настройте данные:
```javascript
const app = Vue.createApp({
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
]
};
},
methods: {
updateItems(newItems) {
this.items = newItems;
}
}
});
// Регистрация компонента draggable
app.component('draggable', window['vue3-draggable'].default);
// Монтируем приложение
app.mount('#app');
```
### Объяснение
1. **Подключение библиотек**: Убедитесь, что скрипты загружаются в правильном порядке: сначала Vue, затем `vue3-draggable`.
2. **Использование компонента**: При использовании компонента `draggable` необходимо использовать `v-model` для привязки к массиву элементов. Также важно правильно определить `item-key`, который будет уникальным идентификатором для каждого элемента.
3. **Шаблон слотов**: Если вы хотите использовать пользовательский шаблон (например, `<template v-slot>`) внутри `draggable`, убедитесь, что вы правильно указываете слот, как это сделано в примере выше.
4. **Методы и реактивность**: Метод `updateItems` используется для обновления массива с элементами при изменении их порядка, что является стандартной практикой при использовании компонентов перетаскивания.
С помощью этого подхода вы сможете успешно интегрировать компонент `vue3-draggable` в ваш проект на Vue 3 без использования сборщиков.
- app.component('draggable', window['vue3-draggable']); + app.component('draggable', window['vue3-draggable'].default);