为什么我的删除项目事件不会发送给父级?
Why won't my delete item event emit to the parent?
我正在尝试从我的数据属性中删除一个项目。删除由每个项目上的删除按钮触发。它们会触发子组件中的 deleteItem(index) 函数,然后该函数会发送给父组件。但由于某种原因,它永远不会触发父级中的事件处理程序。
帮助拖放也将是一个加号。谢谢你。
https://jsfiddle.net/4Ld0ubjt/
<html>
<head>
<title>
</title>
<!--- Import Vue.js library --->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="vue.js"></script>
</head>
<body>
<div class="panel-body">
<div id="itemsApp" @delete-item="deleteItem(idx)">
<list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item"></list-item>
</div>
</div>
<div class="panel-footer clearfix">
</div>
</div>
</body>
</html>
<!--- END: Main body --->
/**
* Function to run after the Document has completed loading.
*/
$(function () {
/**
* Load and initialize the Module Object
*/
Vue.component('list-item', {
props: ['item', 'index'],
template: `
<div draggable="true" @dragStart="dragstart(index, $event)" @dragFinish="dragfinsih(index, $event)" class="bookmark list-group-item clearfix" :id="index">
<span class="btn glyphicon glyphicon-menu-hamburger pull-left" title="Move Bookmark"></span>
<a :href="item.URL_TE" :id="item.URL_HSH_NR">{{item.URL_NA}} - {{index}}</a>
<div class="btn-group pull-right">
<a class="btn btn-default glyphicon glyphicon-pencil edit" role="button" title="Edit Bookmark" href="##"></a>
<button v-on:click="deleteItem(index)" class="btn btn-danger glyphicon glyphicon-remove delete" title="Delete Bookmark"></button>
</div>
</div>
`,
methods: {
deleteItem(idx) {
console.log("Index? " + idx);
this.$emit('delete-item', idx);
},
/**********START DRAG AND DROP LOGIC********** */
dragstart(which, ev) {
console.log("In dragStart " + JSON.stringify(ev));
ev.dataTransfer.setData('Text', which.index);
ev.dataTransfer.dropEffect = 'move'
this.dragging = which;
},
dragfinish(to, ev) {
this.moveItem(this.dragging, to);
},
moveItem(from, to) {
this.bookmarks.splice(to, 0, this.bookmarks.splice(from, 1)[0]);
}
/**********END DRAG AND DROP LOGIC********** */
},
})
var itemsApp = new Vue({
el: '#itemsApp',
data: {
items: [
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
},
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
}
]
},
methods: {
deleteItem(i) {
console.log("In parent deleteItem " + i);
this.data.splice(i, 1);
}
}
})
});
事件处理程序应该在子组件上
<div id="itemsApp">
<list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item" @delete-item="deleteItem"></list-item>
</div>
在Vue组件中,data
应该是一个函数
var itemsApp = new Vue({
el: '#itemsApp',
data() {
return {
items: [
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
},
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
}
]
}
},
methods: {
deleteItem(i) {
console.log("In parent deleteItem " + i);
this.items.splice(i, 1);
}
}
})
你可以查看demo here
我正在尝试从我的数据属性中删除一个项目。删除由每个项目上的删除按钮触发。它们会触发子组件中的 deleteItem(index) 函数,然后该函数会发送给父组件。但由于某种原因,它永远不会触发父级中的事件处理程序。
帮助拖放也将是一个加号。谢谢你。
https://jsfiddle.net/4Ld0ubjt/
<html>
<head>
<title>
</title>
<!--- Import Vue.js library --->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="vue.js"></script>
</head>
<body>
<div class="panel-body">
<div id="itemsApp" @delete-item="deleteItem(idx)">
<list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item"></list-item>
</div>
</div>
<div class="panel-footer clearfix">
</div>
</div>
</body>
</html>
<!--- END: Main body --->
/**
* Function to run after the Document has completed loading.
*/
$(function () {
/**
* Load and initialize the Module Object
*/
Vue.component('list-item', {
props: ['item', 'index'],
template: `
<div draggable="true" @dragStart="dragstart(index, $event)" @dragFinish="dragfinsih(index, $event)" class="bookmark list-group-item clearfix" :id="index">
<span class="btn glyphicon glyphicon-menu-hamburger pull-left" title="Move Bookmark"></span>
<a :href="item.URL_TE" :id="item.URL_HSH_NR">{{item.URL_NA}} - {{index}}</a>
<div class="btn-group pull-right">
<a class="btn btn-default glyphicon glyphicon-pencil edit" role="button" title="Edit Bookmark" href="##"></a>
<button v-on:click="deleteItem(index)" class="btn btn-danger glyphicon glyphicon-remove delete" title="Delete Bookmark"></button>
</div>
</div>
`,
methods: {
deleteItem(idx) {
console.log("Index? " + idx);
this.$emit('delete-item', idx);
},
/**********START DRAG AND DROP LOGIC********** */
dragstart(which, ev) {
console.log("In dragStart " + JSON.stringify(ev));
ev.dataTransfer.setData('Text', which.index);
ev.dataTransfer.dropEffect = 'move'
this.dragging = which;
},
dragfinish(to, ev) {
this.moveItem(this.dragging, to);
},
moveItem(from, to) {
this.bookmarks.splice(to, 0, this.bookmarks.splice(from, 1)[0]);
}
/**********END DRAG AND DROP LOGIC********** */
},
})
var itemsApp = new Vue({
el: '#itemsApp',
data: {
items: [
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
},
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
}
]
},
methods: {
deleteItem(i) {
console.log("In parent deleteItem " + i);
this.data.splice(i, 1);
}
}
})
});
事件处理程序应该在子组件上
<div id="itemsApp">
<list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item" @delete-item="deleteItem"></list-item>
</div>
在Vue组件中,data
应该是一个函数
var itemsApp = new Vue({
el: '#itemsApp',
data() {
return {
items: [
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
},
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
}
]
}
},
methods: {
deleteItem(i) {
console.log("In parent deleteItem " + i);
this.items.splice(i, 1);
}
}
})
你可以查看demo here