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

Question

I want to pass an event into my vue.componenet, I have tried different ways but it all got "TypeError: Cannot read property 'preventDefault' of undefined"

Here is my 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);
    }
}

My 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>

My template:

<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>

If I use EditSiteAsset($event) in v-on, and in vue.component's method is this.$emit('edit-site-asset', asset);, it wont work either.

My method EditSiteEvent() needs an event to operate

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 is not "prop" in classic Vue terminology, its just special keyword you can use to pass DOM event when setting up inline DOM event listener

...also, you can remove following code from your event handler

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

if you use event modifiers like this:

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