При перетаскивании в Vue 3 значение не отображается
Я использую Vue draggable для сортировки элементов из моего Store.js путем перетаскивания (здесь я упростил свой пример, используя только ['a', 'b', 'c'] в качестве данных моего магазина).
Я также использую вычисляемое свойство, доступное из setup().
<draggable v-model = "myList" item-key = "id" @start = "drag=true" @end = "drag=false" >
<template #item = "{card}">
<p>{{ card }}</p>
</template>
</draggable>
import draggable from 'vuedraggable';
export default {
name: "Dashboard",
components: {
draggable
},
setup() {
const cards = computed(() => {
return ['a', 'b', 'c']
})
return {
cards
}
}
}
Я знаю, что шаблон повторяется через cards, но значение не отображается или недоступно.
Ответы 1
В Vue 3 - при запуске setup экземпляр компонента еще не создан. В результате у вас не будет доступа к параметрам компонентов data, computed, methods.
Справка: https://v3.vuejs.org/guide/composition-api-setup.html#accessing-component-properties
Также в компоненте Draggable к элементу массива будет обращаться переменная element.
Обновленный код шаблона:
<draggable v-model = "myList" item-key = "id" @start = "drag=true" @end = "drag=false" >
<template #item = "{element}">
<p>{{ element.value }}</p>
</template>
</draggable>
Попробуйте изменить код компонента следующим образом:
import draggable from 'vuedraggable';
export default {
name: "Dashboard",
components: {
draggable
},
data:function(){
return {
drag:false
}
},
computed:{
myList:function(){
return [{id:1,value:'Card A'},{id:2, value:'Card B'}];
}
}
}
Отредактировал ответ @ Philx94
без доступа к какому-либо значению в шаблоне это возвращает TypeError: Cannot read property 'value' of undefined
Только что обнаружил точную проблему, доступ к элементу массива можно получить через выделенную переменную element. Теперь должно работать @ Philx94
К сожалению, у меня такое же поведение