Question

我想使用this。$ emit（....）将另一个函数传递到我的Vue componenet中。但是，尽管我已经阅读了很多有关emit的文档，但它似乎运行不佳

我的cshtml文件

<jl-asset-list inline-template :asset="siteAsset" v-on:highlight-asset="HighlightAsset(siteAsset, $event)" v-on:filtered-site-asset="FilteredSiteAssets">
       @Html.Partial("~/Views/Asset/Templates/_AssestList.cshtml")
</jl-asset-list>

我的Vue.component.js文件

Vue.component('jl-asset-list', {
props: {
    hasCompleteTask: {
        default: false,
        type: Boolean
    },
    asset: {
        type: Object
    }
},
methods: {
    EditSiteAsset(asset) {
        this.$emit('edit-site-asset', asset);
    },
    EditJobAsset(asset) {
        this.$emit('edit-job-asset', asset);
    },
    HighlightAsset() {
        this.$emit('highlight-asset');
    },
    FilteredSiteAssets: function () {
        this.$emit('filtered-site-asset');
    }
}

}）;

我的模板：（_AssestList.cshtml）

<div class="jl-assets-list scrollbar-lighten-metal rtl">
<div class="jl-card-box-wrapper ltr" 
     v-bind:class="{ selected: asset.IsHighlighted }" 
     v-on:click="HighlightAsset" v-for="(asset, index) in FilteredSiteAssets">
    <div class="jl-card-box">
        <template v-if="hasCompleteTask">
            <div class="row ml0 mb6">
                <template v-if="asset.NoOfJobAssetTasks > 0">
                    <span class="label jobasset_edit_task"
                          v-bind:class="(asset.NoOfJobAssetTasks == asset.NoOfCompleteTasks) || asset.JobAssetComplete ? 'label-success' : 'label-warning'">
                        Tasks Completed: {{ asset.NoOfCompleteTasks }}/{{ asset.NoOfJobAssetTasks }}
                    </span>
                </template>
                <template v-else>
                    <span class="label jobasset_edit_task"
                          v-bind:class="asset.JobAssetComplete ? 'label-success' : 'label-warning'">
                        {{ asset.JobAssetComplete ? 'Completed' : 'Incomplete' }}
                    </span>
                </template>
            </div>
        </template>
        <label>{{asset.Description}}</label><i v-if="asset.IsSuspended" class="mdi mdi-do-not-disturb text-danger mdi-18px" title="Suspended"></i>
        <table class="jl-card-box-labels table-2-column">
            <tr>
                <td>Reference</td>
                <td>{{asset.CustomReference}}</td>
            </tr>

它显示第一个父div，但不显示其余

将外部函数传递给Vue组件

0 个答案: