是否可以将 $event 从 cshtml 传递到 Vue.component？

Question

我想将一个事件传递到我的 vue.componenet，我尝试了不同的方法，但都得到了 "TypeError: Cannot read property 'preventDefault' of undefined"

这是我的 Vue.componenet:

Vue.component('jl-asset-list', {
created() {
    console.log(this.asset);
    console.log(this.canModify);
    console.log(this.editSiteAssetAllowed);
    console.log(this.event);
},
props: {
    hasCompleteTask: {
        default: false,
        type: Boolean
    },
    asset: {
        type: Object,
        required: true
    }
},
methods: {
    EditSiteAsset(asset, event) {
        event.preventDefault();
        event.stopPropagation();

        var context = this;
        context.SelectedSiteAsset = asset;

        var target = event.target || event.srcElement;
        var icon = $(target).closest('.jobasset_edit');

        icon.prop('disabled', true);
        this.$emit('edit-site-asset', asset);
    },
    EditJobAsset(asset) {
        this.$emit('edit-job-asset', asset);
    },
    HighlightAsset(asset) {
        this.$emit('highlight-asset', asset);
    }
}

我的 CSHTML：

<jl-asset-list v-for="(siteAsset, index) in FilteredSiteAssets" 
                                           inline-template 
                                           v-bind:asset="siteAsset" 
                                           v-bind:canModify="Model.CanModify"
                                           v-bind:editSiteAssetAllowed="Model.EditSiteAssetAllowed"
                                           v-on:highlight-asset="HighlightAsset" 
                                           v-on:edit-site-asset="EditSiteAsset">
                                @Html.Partial("~/Views/Asset/Templates/_AssestList.cshtml")
                            </jl-asset-list>

我的模板：

<a v-on:click="EditSiteAsset(asset)" 
       class="jobasset_edit jl-icon-orange" data-toggle="tooltip" data-placement="top" data-original-title="Edit">
        <i class="mdi mdi-pencil-circle mdi-24px"></i>
    </a>

如果我在 v-on 中使用 EditSiteAsset($event)，而在 vue.component 中的方法是 this.$emit('edit-site-asset', asset);，它也不会工作。

我的方法 EditSiteEvent() 需要一个事件来操作

EditSiteAsset: function (data, event) {
        event.preventDefault();
        event.stopPropagation();

        var context = this;
        context.SelectedSiteAsset = data;

        var target = event.target || event.srcElement;
        var icon = $(target).closest('.jobasset_edit');

        icon.prop('disabled', true);

        GetSwitchModalPartial(
            '/Asset/UpdateSiteAsset?siteId=' + context.Model.SiteId + '&id=' + data.Id,
            { forJobAsset: true },
            function (data) {
                icon.prop('disabled', false);
            });
        return false;
    },

Answer 1

    <a v-on:click="EditSiteAsset(asset, $event)">
        <i class="mdi mdi-pencil-circle mdi-24px"></i>
    </a>

$event 不是经典 Vue 术语中的 "prop"，它只是您在设置内联 DOM 事件监听器时可以用来传递 DOM 事件的特殊关键字

...另外，您可以从事件处理程序中删除以下代码

event.preventDefault();
event.stopPropagation();

如果您这样使用 event modifiers：

    <a v-on:click.prevent.stop="EditSiteAsset(asset, $event)">
        <i class="mdi mdi-pencil-circle mdi-24px"></i>
    </a>

是否可以将 $event 从 cshtml 传递到 Vue.component？

Is it possible to Pass $event from cshtml into Vue.component?

javascript

razor

emit

vue.js