如何在vue 3中制作一个良好的工作选择输入组件

Question

我试图用一个选择字段进行分页，但我不明白如何给出v-模型和值属性，因为现在我喜欢这个↓.

--这是该组件中的选择/分页部分..

        <p v-on:click="back" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l cursor-pointer">Zurück</p>
        <p class="bg-gray-300 text-gray-800 font-bold py-2 px-4 "><span>{{siteCount}}/{{siteTotal}}</span></p>
        <select :value="modelValue" v-on:change="selectPage">
            <option v-for="select in select" :value="select">{{select}}</option>
        </select>
        <p v-on:click="next" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r cursor-pointer">Weiter</p>
    </div>
</template>

<script>
import SearchIcon from "../Assets/SearchIcon";
import NavBar from "./NavBar";
export default {
    name: "PaginateSeason",
    props: {
        data: {
            name: String,
            description: String,
            thumbnail: String,
        },
        siteCount: Number,
        siteTotal: Number,
        select: Array,
        modelValue: String,
    },
    components: {
        NavBar,
        SearchIcon
    },
    emits: ['next', 'back', 'selectPage'],
    methods:{
        next() {
            this.$emit('next')
        },
        back() {
            this.$emit('back')
        },
        selectPage() {
            this.$emit('selectPage')
        }
    },
}
</script>

--这是我获取需要的任何东西的主要组件.

<template>
    <router-view>
        <NavBar :is-disabled="true"></NavBar>
        <div v-if="isLoading" class="flex flex-col items-center justify-center mt-9">
            <LoaderSpinner></LoaderSpinner>
            <p>Daten werden geladen...</p>
        </div>
        <div v-else>
            <PaginateSeason
                v-model="count"
                :data="seasons"
                :site-count="current"
                :site-total="siteCountTotal"
                :select="select"
                @next="paginateNext"
                @back="paginateBack"
                @selectPage="allCount"
            />
        </div>
    </router-view>
</template>

<script>
import NavBar from './NavBar'
import PaginateSeason from './PaginateSeason'
import LoaderSpinner from "../Assets/LoaderSpinner";
export default {
    name: "AllSeasons",
    components: {
        PaginateSeason,
        NavBar,
        LoaderSpinner
    },
    data(){
        return {
            seasons: null,
            current: 1,
            pageSize: 4,
            isLoading: true,
            siteCountTotal: null,
            select: [],
            count: '',
        }
    },
    mounted(){
        this.list(this.current)
        const list = async () => {
            await axios.get(`/api/seasons/all`).then(response => {
                let meta = response.data.meta
                this.siteCountTotal = meta.last_page
                for (let i = 1; i <= this.siteCountTotal; i++) {
                    this.select.push(i)
                }
            }).catch(error => {
                console.log(error)
            })
        }
        list()
    },
    methods: {
        async list(page) {
            await axios.get(`/api/seasons/all?page=${page}`).then(response => {
                this.seasons = response.data.data
            }).catch(error => {
                console.log(error)
            }).finally(() => {
                setTimeout(() => {
                    this.isLoading = false
                },1000)
            })
        },
        paginateNext () {
            if (this.seasons.length < this.pageSize) {
                this.current = 1
                this.list(this.current)
            } else {
                this.current += 1
                this.list(this.current)
            }
        },
        paginateBack () {
            if (this.current === 1) {
                this.current -= 0
            } else {
                this.current -= 1
                this.list(this.current)
            }
        },
        allCount() {
            console.log(this.count)
        }
    },

如果你能帮我这个忙，我会非常感激的！

Answer 1

不会更新AllSeasons组件上的AllSeasons变量，因为您将它作为v-model传递给PaginateSeason组件，但是PaginateSeason从不发出update:modelValue。

像这样实现selectPage来解决这个问题：

selectPage(event) {
  this.$emit('update:modelValue', event.target.value)
}

您还可以保留selectPage事件，或者在AllSeasons组件中为count变量添加一个wach，以监视页面更改。您还可能希望从update:modelValue组件中的next和back函数中发出PaginateSeason事件。