首页 > 解决方案 > 导入后如何加载 vue 组件。可能无法自行加载,应加载到它导入的文件中

问题描述

我正在尝试使用过滤器制作一个动态表。过滤器在Filters.vue并且应该加载到Table.vue. 但是Filters.vue不允许加载自己,我希望它自己导入到 中Table.vue,然后Table.vueFilters.vue.

如果Filters.vue自己加载,那么它会崩溃,我可以通过将东西放在Table.vuehtml 标记中的道具中来修复崩溃,但这不是我想要的方式。


表.vue

 <div class="row m-3">
     <guide-filter></guide-filter>
 </div>

过滤器.vue

<template>
    <div class="col-sm-auto">
        <small class="text-cap mb-2 support-text-body">Status</small>
        <div class="w-100">
            <select v-model="filterResult.active" class="select2-selection custom-select">
                <option value="">All</option>
                <option value="1" >Active</option>
                <option value="false" >Archived</option>
            </select>
        </div>
    </div>
    <div class="col-sm-auto">
        <small class="text-cap mb-2 support-text-body">Language </small>
        <div class="w-100">
            <select v-model="filterResult.language_id" class="select2-selection custom-select">
                <option value="">All</option>
                <option v-for="language in languages" v-bind:key="language.id" v-bind:value="language.id">{{ language.name }}</option>
            </select>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                filterResult: {},
            }
        },
    }
</script>

标签: laravelvue.js

解决方案


 <div class="col-sm-auto">
    <small class="text-cap mb-2 support-text-body">Language </small>
    <div class="w-100">
        <select v-model="filterResult.language_id" class="select2-selection custom-select">
            <option value="">All</option>
            <option v-for="language in languages" v-bind:key="language.id" v-bind:value="language.id">{{ language.name }}</option>
        </select>
    </div>
</div>

推荐阅读