Question

首先，我想让所有人都知道我对Vue.js和Web开发非常陌生。我正在为显示分页数据的网页实现“转到页面__”功能。使用此功能的预期结果是允许用户跳到特定页面，而不必始终单击分页器中最右边的结果。

我已按预期启动并运行代码；但是，如果我在下面最初包含的第一个代码节的第5行中包含那段代码，以检查是否已将正确的值从父组件传递给子组件，则它仅用预期的页面填充下拉列表。如果删除{{last_page}}行，则选项下拉列表不会填充可用页面。

我的解决方案是包括一个v-show属性，该属性的布尔值设置为false，以保持该元素在DOM中呈现，并且我知道它很乱，所以我的问题是：到底是什么导致我的代码没有如果删除了看似“任意”的测试代码，则填充下拉选项吗？

代码在下面。提前致谢！

PageSelect组件

<template>
    <div class="go-to">
        <p>Go to page:</p>
        <form>
            <span v-show="render">{{ last_page }}</span>
            <select v-model="selected" @click="changePage(selected)" 
            @refresh="populateOptions">
                <option v-for="paginatorOption in paginatorOptions" v- 
                text="paginatorOption" ></option>
            </select>   
        </form>    
    </div>
</template>

<script>
    export default {
        data() {
            return {
                paginatorOptions: [],
                current_page: this.$parent.current_page,
                selected: '',
                last_page: this.$parent.last_page,
                render: false
            }
        },
        methods: {
            changePage: function(selected) {
                this.$emit('changePage', selected);
            }, 
            populateOptions: function(lastPage) {
                this.last_page = lastPage;
                console.log(this.last_page);
                for(var i=0;i<this.last_page;i++)
                {
                    this.paginatorOptions[i] = i + 1;
                }
            }           
        }, 
        created: function() {
            this.$parent.$on('populateOptions', this.populateOptions);
        }, 
    }
</script>

父组件（模板的一部分）

<div class="page-number">
    <my-paginator :response="paginationResponseData" 
    @paginate="fetchMyServerData"></my-paginator>
</div>
<page-select @changePage="goToPage"></page-select>

父组件（脚本部分）

<script>
    export default {
        data() {
            return {
                //non-relevant data
                paginationResponseData: {},              
                //non-relevant data
                current_page: 1,
                last_page: -1,           
                //non-relevant data
            }
        },
        watch: {               
            //bunch of watchers for filter variables
        },
        methods: {
            //non-relevant methods               
            debounceLoadUsers: _.debounce(function() {
                this.loadUsers(this.getUsersUrl());
            }, 800),
            loadUsers: function(url) {
                this.isLoading = true;
                axios.get(url).then((response) => {
                    this.users = response.data.data;
                    this.last_page = response.data.last_page;
                    this.current_page = response.data.current_page;
                    this.total_results = response.data.total;
                    this.isLoading = false;
                    this.paginationResponseData = response.data;
                    this.$emit('refresh');
                    this.$emit('populateOptions', this.last_page);
                });
            },
            goToPage: function(selected) {
                if (selected != this.current_page) {
                    this.isLoading = true;
                    this.loadUsers(this.getUsersUrl() + '&page=' + selected);
                }
                this.isLoading = false;
            }
            //non-relevant methods
        },
        mounted() {
            this.loadUserStatuses();
            this.loadUserTypes();
            this.loadVendorSegments();
            this.loadVendors();
            this.loadUsers(this.getUsersUrl());
            this.fetchMyServerData();          
        },
    }
</script>

带有自定义PageSelect组件的

0 个答案: