Vue：从祖父母到孙子的数据（搜索组件）

Question

在我的Vue应用程序中，我有一个视图（＆＃39; projects.vue＆＃39;），它有一些.json，它有一个子组件（＆＃39; subheader.vue＆＃39;），用于导入搜索/ filter mixin。我有这个工作，但我想将搜索元素从子标题组件拆分为它自己的组件，因此子标题只包含标题，然后导入搜索组件。尽管调整了工作版本中的道具和绑定，我的新三组件设置却抛出了错误。这是设置：

searchMixin.js：

export default {
    computed: {
        filteredProjects: function() {
            const searchTerm = this.search.toLowerCase();
            if (!searchTerm) {
                return false;
            }
            return this.projects.filter((project) => {
                return  (project.client.toLowerCase().match(searchTerm)) ||
                            (project.contacts.filter((el) => {
                                return el.name.toLowerCase().match(searchTerm);
                            }).length > 0) ||
                            (project.projectReference.toLowerCase().match(searchTerm));
            });
        }
    }
}

Projects.vue：

<template>

    <div class="container" id="projects">
    <!-- app-subheader is global component, imported & registered in main.js -->
        <app-subheader v-bind:title="title" v-bind:subtitle="subtitle" />
        [ snip irrelevant stuff ] 
    </div>

</template>


<script>

    export default {
        data () {
            return {
                title: "Projects",
                subtitle: "",
                projects: []
            }
        },
        created: function() {
            this.$http.get('https://xyz.firebaseio.com/projects.json')
                .then(function(data){
                    return data.json();
                })
                .then(function(data){
                    var projectsArray = [];
                    for (let key in data) {
                        data[key].id = key;
                        this.projectID = key;
                        projectsArray.push(data[key]);
                    }
                    this.projects = projectsArray;
                })
        },
    } // export default
</script>

subheader.vue：

<template>  
    <div class="subheader"> 

        <div class="headings">
            <h1 v-html="title"></h1>
            <h2 v-html="subtitle"></h2>

            <!-- I want to conditionally include <app-search /> according to an ID on an element in the grandparent (e.g., projects.vue)  -->
            <app-search v-bind:projects="projects" />

        </div>
    </div>
</template>


<script>

    import Search  from './search.vue';

    export default {
        components: {
            'app-search': Search
        },
        props: [ "title", "subtitle", "projects" ],
        data() {
            return {
                search: "",
                projects: []
            }
        },
        created: function() {
            console.log("created; log projects", this.projects);
        },
        methods: {},
        computed: {}
    }
</script>

search.vue：

<template>  
    <div class="search-wrapper">

        <div class="search">
            <input type="text" v-model="search" placeholder="search by client, contact name, description, project, source" />
        </div>

        <div class="search-results-wrapper">
            <h3>search-results:</h3>
            <span class="results-count" v-if="filteredProjects.length == 0">
                no results matching search "{{ search }}":
            </span>
            <span class="results-count" v-if="filteredProjects.length > 0">
                {{ filteredProjects.length }} result<span v-if="filteredProjects.length > 1">s</span> matching search "{{ search }}":
            </span>

            <ul class="search-results" v-bind:class="{ open: filteredProjects.length > 0 }">
                <li v-for="(project, ix) in filteredProjects" :key="ix">
                    {{ ix + 1 }}:
                    <router-link v-bind:to="'/project-detail/' + project.id">
                        {{ project.client }} ({{ project.projectReference }})
                    </router-link>
                </li>
            </ul>
        </div>

    </div><!-- END .search-wrapper -->
</template>


<script>

    import searchMixin  from '../mixins/searchMixin.js';

    export default {
        props: [ "projects" ],
        data() {
            return {
                search: "",
            }
        },
        created: function() {
        },
        mixins: [ searchMixin ],
    }

调用搜索功能时，抛出此错误：

[Vue warn]: Error in render: "TypeError: Cannot read property 'filter' of undefined"
found in --->
<AppSearch> at src/components/search.vue
    <AppSubheader> at src/components/subheader.vue
        <Projects> at src/components/projects.vue
            <App> at src/App.vue

...这似乎表明搜索mixin没有得到＆＃39;项目＆＃39;。

另外，在subheader.vue中，无论我有没有＆＃39;项目，我都会遇到各种错误。作为道具或项目：[]＆＃39;作为一个数据密钥，在一次或另一种情况下，我或者得不到搜索功能或错误的结果，＆＃34;属性或方法＆＃34;项目＆＃34;未在实例上定义，但在渲染期间引用＆＃34;。

显然我对文档缺乏明确性;祖父母 - 父子数据流。非常感谢任何帮助。

Whiskey T。