如何在 Vue JS 中处理表单列表

Question

我有一个表单列表，我想用一个

ref

来绑定它们。

ref 将保存一个以表单编号作为键的对象，并且值应该再次是一个其键绑定到嵌套对象键的对象。

const forms = reactive({})

// template 

<form v-for="item in list" :set="forms[item.id]={}">
  <input v-model="forms[item.id]['name']" />
  <input v-model="forms[item.id]['email']" />
  <input v-model="forms[item.id]['phone']" />
</form>

我有上述实现，但字段引用似乎不起作用，我也无法在字段中输入值。

工作演示

我希望能够处理嵌套对象作为输入的引用

Answer 1

您必须首先初始化 ref，像 v-const 这样的快捷方式初始化最近才被引入到计划中

const list = ref( [1,2,3] )

watch(list, list => {
  list.forEach(item => form.value[item] = {})
}, { immediate: true })