Question

这是我的replies.vue文件。我正在做的是当创建回复组件时，我调用一个fetch（）方法从服务器加载一些数据：

//Replies.vue

<template>
  <div>   
    <div v-for="(reply, index) in replies_with_pagination.data">
        <reply :attributes="reply" :key="reply.id" :current_user_id="auth_user_id" @iamdeleted="updateCollection(index)"></reply>
    </div>

    <pagination :current_paginated_dataSet="replies_with_pagination"></pagination>
  </div>
</template>

<script>
import Reply from './Reply.vue';

export default{

    components: { Reply },

    props: ['all_replies','auth_user_id','thread_id'],

    data() {
        return {
            all_reply_items: this.all_replies,
            replies_with_pagination: '',
        }
    },

    methods: {
        fetch: function(){
              let vm = this;
              axios.get(route('replies.paginated',{ 'thread' : this.thread_id 
            }))
            .then(function(serverResponse){
                vm.replies_with_pagination = serverResponse.data;
            });
        },
    },

    created() {
        this.fetch();
    }

然后我通过 current_paginated_dataSet 道具将其传递给分页组件。这是pagination.vue的代码

//Pagination.vue

<template>
   <div>
    <nav aria-label="...">
      <ul class="pagination">
        <li class="page-item disabled" v-show="current.prev_page_url">
          <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active">
          <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
        </li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item" v-show="current.next_page_url">
          <a class="page-link" href="#">Next</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
 export default{

    props: ['current_paginated_dataSet'],

    data() {
        return {
            current: this.current_paginated_dataSet,
        }
    },
 }
</script>

正如您所看到的，我正在使用此属性初始化分页组件中名为当前的数据。此 current_paginated_dataSet 属性在回复组件中初始化为FALSE值，该值在从服务器获取数据后重置为服务器返回的某个对象。

我的问题是分页组件上的上一个和下一个按钮不可见。看来，分页组件上的当前数据属性没有从从服务器加载数据后更新的回复组件获取更新值。它始终设置为从父根组件接收的初始值FALSE。

我在这里做错了什么？

修改

如果不是引用当前数据属性，我可以直接引用上一个和下一个按钮中的 current_paginated_dataSet 道具，如下所示：

// this works:
<li class="page-item disabled" v-show="current_paginated_dataSet.prev_page_url">
   <a class="page-link" href="#" tabindex="-1">Previous</a>
</li>

但我想通过引用数据属性当前来实现这一目标。我怎么能这样做？

laravel5.4

0 个答案: