如何判断Quasar框架中Dialog内的表单是否被用户修改？

方法1：利用QForm内置的dirty状态 #

Quasar的q-form组件原生支持跟踪表单的修改状态，它的dirty属性会在用户修改任意表单项后自动变为true，未修改时保持false。你可以通过监听update:dirty事件或者直接引用表单实例来获取这个状态，然后动态绑定给q-dialog的persistent属性。

示例代码：

<template>
  <q-dialog :persistent="formIsDirty">
    <q-form @update:dirty="formIsDirty = $event">
      <!-- 你的表单项 -->
      <q-input v-model="form.name" label="姓名" />
      <q-select v-model="form.role" :options="roles" label="角色" />
      
      <div class="q-pa-md">
        <q-btn label="确认提交" type="submit" />
      </div>
    </q-form>
  </q-dialog>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  name: '',
  role: ''
})
const formIsDirty = ref(false)
const roles = ref(['管理员', '普通用户'])
</script>

这个方案最省心，Quasar已经帮你处理了所有表单项的状态跟踪，无需手动绑定每个输入的变更事件。

方法2：对比表单初始值与当前值 #

如果需要更灵活的判断逻辑（比如忽略特定字段的修改），可以在组件初始化时深拷贝一份表单的初始值，通过计算属性实时对比当前值和初始值，判断是否存在修改。

示例代码：

<template>
  <q-dialog :persistent="hasFormChanged">
    <q-form>
      <q-input v-model="form.name" label="姓名" />
      <q-input v-model="form.age" type="number" label="年龄" />
    </q-form>
  </q-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'

const form = ref({
  name: '',
  age: 0
})
// 深拷贝保存初始值，避免引用类型共享内存
const initialForm = ref(JSON.parse(JSON.stringify(form.value)))

// 计算属性判断是否修改
const hasFormChanged = computed(() => {
  // 简单场景可以用JSON.stringify对比，复杂场景建议用深比较工具（如lodash.isEqual）
  return JSON.stringify(form.value) !== JSON.stringify(initialForm.value)
})
</script>

注意：如果表单包含复杂类型（如嵌套对象、数组），JSON.stringify可能会有局限性，这种情况下可以使用专门的深比较工具来提升准确性。

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