Question

我正在尝试从我的数据属性中删除一个项目。删除由每个项目上的删除按钮触发。它们触发子组件中的deleteItem（index）函数，然后将其发送给父组件。但是由于某种原因，它永远不会触发父级中的事件处理程序。

拖动n下降的帮助也将是一个加号。谢谢。

<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);
            }
        }
    })

});

Answer 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

为什么我的删除项目事件不会发送给父级？

1 个答案: