vue3使用elment-plus分页器不能显示

Question

今天在写分页的时候，发现element-plus的分页器无法显示
问题如下：

 <div>
          {{pageInfo.totalNum}}
          <el-pagination background layout="prev, pager, next" :page-count="2"/>
        </div>

正常显示

但是我一旦绑定ref或者reactive函数声明的变量，分页器直接就无了

<div>
          {{pageInfo.totalNum}}
          <el-pagination background layout="prev, pager, next" :page-count="pageInfo.totalNum"/>
        </div>


let pageInfo = reactive({
  totalNum:0,

})
onMounted(() => {
  getMenus()
})

function getMenus() {
  getAllMenus(0, 10).then(res => {
    menus.value = res.data.data.records
    pageInfo.totalNum=res.data.data.pages
  })
}

再看元素，居然直接不翼而飞

不知道是个什么情况

Answer 1

Vue 3 的 reactive 方法是一个响应式方法，用于将对象转换为响应式对象。这样，当 pageInfo.totalNum 的值改变时，视图应该会自动更新。你可以试着改变一下totalNum的初始值。