Vue.js分页中v-model与pageNumber自动更新的逻辑疑问

我是Vue.js新手，每次点击分页页码，控制台都会打印对应页码数字，但我并没有在自定义方法里写增减pageNumber值的逻辑，完全搞不懂这个组件是怎么识别并更新pageNumber的。之前我还傻兮兮地尝试过获取元素文本内容这种复杂操作。

相关代码 #

<v-pagination
     v-model="pageNumber"
     :length="numberOfPages"
     color="primary"
     totalVisible="5"
     class="paginationComponent"
     @update:modelValue="changePage()">
</v-pagination>

<script>
export default {
  data: () => ({
    pageNumber: 1,
  }),
  methods: {
    init() {
      axios({
        method: "get",
        url: "/products",
        params: {
          size: 10,
          page: this.pageNumber - 1,
        },
      })
        .then((response) => {
          console.log('Success');
        })
        .catch((error) => {
          console.error(error);
        });
    },
    changePage() {
      console.log(this.pageNumber);
      this.init();
    },
  }
}
</script>

分页组件展示：一个包含多个可点击页码按钮的分页控件，当前选中的页码会高亮显示。

这是因为你用了v-model指令绑定pageNumber，Vuetify的v-pagination组件内部已经封装了点击页码时更新绑定值的逻辑——当你点击不同页码，组件会自动触发update:modelValue事件并把选中的页码值传过来，而v-model本质就是Vue提供的语法糖，它会自动帮你完成「监听update:modelValue事件 + 更新绑定的pageNumber数据」这两步操作，根本不需要你手动去写增减数值的代码。

你代码里写的@update:modelValue="changePage()"其实可以简化，甚至不需要单独写这个事件监听：因为v-model已经帮你同步了pageNumber的值，你可以直接通过监听pageNumber的变化来触发请求，比如用Vue的watch选项：

export default {
  // ... 其他代码
  watch: {
    pageNumber() {
      this.init()
    }
  }
}

这样连changePage方法都可以省掉，代码会更简洁。

之前你尝试获取元素文本内容的做法完全是绕远路，Vue的核心思想就是数据驱动视图，这类UI组件已经帮你封装好了交互逻辑，直接用v-model绑定数据就能实现双向同步，不用再操作DOM元素。

内容的提问来源于stack exchange，提问作者SAMPREET GUMPARLA