如何在Vue表单中捕获queueId prop值并随表单数据保存？

当然可以用隐藏文本框绑定v-model来捕获queueId的值，不过其实还有更简洁的实现方式，不需要额外渲染DOM元素，下面分两种方案说明：

方案一：使用隐藏文本框（符合你的思路） #

你可以将现有的v-text-field修改为隐藏状态，同时注意不要同时使用:value和v-model（两者冲突，v-model已经包含了值绑定和输入事件监听）。调整后的代码如下：

<!-- 隐藏的文本框，用于绑定queueId -->
<v-text-field
  v-model="expense.queueId"
  type="hidden"
/>

或者如果需要保留Vuetify组件的结构但隐藏显示，也可以用样式隐藏：

<v-text-field
  v-model="expense.queueId"
  class="d-none"
  readonly
  hide-details="auto"
/>

注意去掉required属性，因为隐藏字段用户无法输入，会导致表单验证失败。

方案二：直接在逻辑中赋值（更优） #

不需要额外的DOM元素，直接在组件初始化或监听queueId变化时，把prop的值赋值给expense.queueId，这样更简洁高效：

1. 在mounted钩子中初始化赋值：

mounted() {
  this.fetchBanks();
  // 初始化时将queueId赋值给expense
  this.expense.queueId = this.queueId;
}

2. 添加watch监听queueId的变化，确保父组件更新queueId时子组件同步更新：

watch: {
  queueId(newQueueId) {
    this.expense.queueId = newQueueId;
  },
  // 保留你原有的watch逻辑
  submitted(v) {
    if (v) {
      this.saveLoader = false;
    }
  },
  contaminated() {
    this.saveLoader = false;
  }
}

这样在调用recordExpense保存表单时，expense.queueId就会和其他用户信息一起被提交。

现有代码的问题修正 #

你当前代码中的这个字段存在冲突：

<v-text-field
  class="px-3"
  outline
  flat
  :value="setQueue"
  v-model="expense.queueId"
  required
  :label=queueId
  persistent-hint
/>

• 同时使用:value和v-model会导致值绑定冲突，v-model会覆盖:value的设置；
• :value="setQueue"绑定的是一个函数，这会导致字段值被设置为函数执行的返回值（你的setQueue函数没有返回值，所以会是undefined）；
• required属性对于隐藏字段来说没有意义，会触发不必要的表单验证错误。

建议你根据上面的方案替换这段代码。

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