Vuetify数据表格中如何实现点击按钮后无刷新原地切换状态按钮

你模板里的v-if状态判断逻辑本身是对的，点击后不即时切换，是因为你的entrada()、salida()方法里大概率只发了接口请求，没有同步修改当前行item的check_in、check_out字段值。Vue检测不到这两个字段的变化，就不会重新触发视图渲染，只有页面重载拉到最新后端数据的时候，按钮状态才会更新。

不需要改你现有的模板代码，只要在两个点击事件的回调里，等接口请求成功后，直接更新当前行item的对应字段就行，响应式系统会自动帮你切换按钮状态：

methods: {
  async entrada(item) {
    // 替换成你自己的签到接口请求逻辑
    await fetch(`/api/checkin/${item.id}`, {method: 'POST'})
    // 接口请求成功后更新本地字段
    // Vue2 写法，避免响应式丢失
    this.$set(item, 'check_in', new Date().toISOString())
    // Vue3 直接写 item.check_in = new Date().toISOString() 即可
  },
  async salida(item) {
    // 替换成你自己的签出接口请求逻辑
    await fetch(`/api/checkout/${item.id}`, {method: 'POST'})
    // 接口请求成功后更新本地字段
    // Vue2 写法
    this.$set(item, 'check_out', new Date().toISOString())
    // Vue3 直接写 item.check_out = new Date().toISOString() 即可
  }
}

• 如果你用的是Vue2版本，直接给item对象新增属性的话Vue无法追踪变化，必须用this.$set()方法更新字段，不然还是不会触发视图更新
• Vue3不存在这个响应式限制，直接给属性赋值就行
• 字段更新后会自动匹配你写的三个判断逻辑：
  • check_in、check_out都为空：显示绿色「Entrada」按钮
  • 仅check_in有值、check_out为空：显示红色「Salida」按钮
  • 两个字段都有值：显示禁用状态的「Registrado」按钮

改完之后点击按钮会直接原地替换成对应状态的按钮，不需要刷新整个页面。

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