Question

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

在users.html页面中，我扩展了这个base.twig，之所以我不能在base.twig上使用相同的代码是因为有些数据只传递给用户控制器上的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。 < / p>

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

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

Answer 1

所以，在阅读完文档后我能够弄明白，我使用inline-template的组件结束了。

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

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

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

这就是组件以及如何使用我在问题中的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>

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

1 个答案: