vue.js - Vue Draggable - 无法让它工作
问题描述
我正在尝试向组件添加可拖动的。但这似乎不起作用。这是 App.vue 文件。
我尝试将列表名称更改为 NewCruds 并在数据中我尝试返回 NewCruds 并在 deaggable 中使用该列表,但随后页面上没有显示任何内容。给我错误,因为组件 crud-component 未定义。我尝试使用注册组件
name : 'crud-component',
在数据之上,但它再次不起作用。
<template>
<div id="app">
<draggable :list="NewCruds" :options="{animation:200}" :element="'crud-component'" @change="runme">
<crud-component
v-for="crud in NewCruds"
v-bind="crud"
:key="crud.id"
:id="crud.id"
:cardtype="crud.cardtype"
@delete="del"
@blur.native ="update"
:fields ="fields"
:message ="crud.message"
:dropoptions = "crud.dropoptions"
></crud-component>
</draggable>
</div>
</template>
<script>
function Crud({ id, message, cardtype, dropoptions, position}) {
this.id = id;
this.message = message;
this.cardtype = cardtype;
this.dropoptions = dropoptions;
this.position = position;
}
import CrudComponent from './mycomponents.vue';
import draggable from 'vuedraggable'
export default {
data() {
return {
cruds: [
],
NewCruds = this.cruds,
fields:[],
}
},
methods: {
addCard(card_type, event) {
event.preventDefault()
var ids = document.getElementById("myids").value;
var pos = parseInt(document.getElementById("curr_position").value);
var bodyParameters = {"type" : card_type,"ids" : ids,"text" : "","position" : pos}
axios.post(
'/api/create',
bodyParameters,
{
headers: {
'Content-Type': 'application/json',
}
}
).then((response) => {
var resp = response.data;
this.cruds.push(new Crud(resp));
document.getElementById("curr_position").value = pos + 1;
}).catch((error) => {
console.log(error)
});
},
read() {
this.mute = true;
var ids = document.getElementById("myids").value;
axios.get(
'/api/block/'+ ids,
{
headers: {
'Content-Type': 'application/json',
}
}
).then((response) => {
var data = response.data
data.forEach(crud => {
this.cruds.push(new Crud(crud));
});
console.log(this.cruds);
}).catch((error) => {
console.log(error)
});
},
update(id, val) {
console.log("got the value as : ");
console.log(val);
},
del(id) {
this.mute = true;
axios.delete(
'/api/delete/'+id,
{
headers: {
'Content-Type': 'application/json',
}
}
).then((response) => {
let index = this.cruds.findIndex(crud => crud.id === id);
this.cruds.splice(index, 1);
this.mute = false;
}).catch((error) => {
console.log(error)
});
},
runme(){
console.log("updating");
}
},
watch: {
mute(val) {
document.getElementById('mute').className = val ? "on" : "";
}
},
components: {
CrudComponent,
},
created() {
this.read();
}
}
</script>
请建议我需要进行哪些更改才能使其正常工作。
解决方案
推荐阅读
- excel - Excel VBA 例程用于换行文本并设置行高
- javascript - 如何更改所有 FullCalendar 的事件颜色 onClick?
- php - ErrorException : implode(): 在不推荐使用数组后传递胶水字符串。交换参数
- mysql - SQL 为过去一周的每一天创建的记录数返回零
- java - 单写者的性能,不同的读者与相同的线程
- java - 是否可以使用 Java 注释更改方法可见性?
- python - 如何用新行扩展 Excel 单元格?
- c# - 如何扩展继承的方法而不是覆盖它?
- python-3.x - 在 tkinter (python3.7) 中禁用撤消按钮
- java - java中的长字符串连接问题?