Question

我遇到VuePaginator的问题，我可以将它挂载到我的Vue app $ refs属性。我正在根据文档进行各种操作，这是我在html中的组件：

<v-paginator :resource.sync="comments" ref="vpaginator" resource_url="{{route('api.item.comments', $item->pk_i_id)}}"></v-paginator>

分页工作正常，但我无法从vuejs代码中触发 fetchData（） ，因为paginator未挂载到 VM。$ refs.vpaginator 的。

以下是我使用的代码：

var app = new Vue({
    el: '#comments',
    data : {
        comments: [],
        newComment: {
            text: ""
        }
    },
    components: {
        VPaginator: VuePaginator
    },
    methods: {
        addComment: function(comment){
            var vm = this;
            this.$http.post($('meta[name="item-url"]').attr('content'), comment)
                .then(function(response){
                    toastr.success(response.data.result);
                    comment.text = "";

                    vm.$.vpaginator.fetchData();
                }).catch(function (error) {
                    if(error.data){
                        toastr.error(error.data.text[0]);
                    }
                })
        },
        logRefs: function(){
            console.log(this.$refs.vpaginator);
        }
    }
});

我创建了 logRefs（） 函数来检查$ ref属性，它总是未定义的。

Answer 1

由于您使用的是VueJS的第1版，因此使用情况略有不同 - 请查看此演示http://jsbin.com/rupogesumo/edit?html,js,output

<v-paginator :resource.sync="comments" v-ref:vpaginator resource_url="{{route('api.item.comments', $item->pk_i_id)}}"></v-paginator>

文档参考：https://v1.vuejs.org/api/#v-ref

无法将儿童组件安装到参考

1 个答案: