嵌套的 vue 实例不返回计算：函数值

Question

我正在使用 twig，在我的基础中，我有一个新的 Vue 实例，它将所有内容分配给 #app，它是紧跟在 body 标记之后的部分。

在 users.html 页面中，我扩展了这个 base.twig，之所以不能在 base.twig 上使用相同的代码是因为某些数据只传递给 users 控制器上的 vue，所以我得到错误在任何其他页面上，因为未设置用户数据。

这就是我的 base.twig

new Vue({
    el: '#app',
    data: {
        hideNav: false,
        userMenuDropdown: false,

        showModal: false
    }
});

在我的 users.html 我有：

var UsersPage = new Vue({
    el: '.users__main',
    data: {
        search_users: '',
        users: {{ users|raw }}
    },
    computed: {
        filteredUsers,
    }
});

function filteredUsers(){
    var self = this;
    return this.users.filter(function(cust){
        return cust.first_name.toLowerCase().indexOf(self.search_users.toLowerCase())>=0;
    });
}

我只是想搜索一个用户，如果我取消第一个引用 #app 的 vue 实例，而不是 .users__main.

我已经设置了一个 jsfiddle 来进一步解释确切的问题，this version（不起作用）有两个 vue 实例，一个在 base.twig 中，另一个在 user.html 文件中，this version 不包含两个实例（有效）。

我为此弄乱了组件，但我无法做到这一点。

Answer 1

所以，我在阅读文档后能够弄清楚，我最终使用了一个带有 inline-template 的组件。

在我的 base.twig 中，我创建了一个也是唯一一个 Vue 实例。

new Vue({
    el: '#app',
});

现在在我的 user.html 文件中扩展了 base.twig 我创建了一个组件。

这最终成为组件，以及我在问题的 jsfiddle 示例中提供的搜索功能如何使用它。

Vue.component('user-search', {
    data: function () {
        return {
            search_users: '',
            users: {{ users|raw }} // this here is json_encoded data from twig passed from the php framework controller
        }
    },
    computed: {
        filteredUsers,
    }
});

function filteredUsers(){
    var self = this;
    return this.users.filter(function(cust){
        return cust.first_name.toLowerCase().indexOf(self.search_users.toLowerCase())>=0;
    });
}

并使用该组件（根据我的代码展示如何使用它）：

<user-search inline-template>
    <input type="text" v-model="search_users">
    <!-- rest of the code with the for loop -->
</user-search>