Javascript Vuetify属性的动态绑定

我有一个表单，它包含一组用户必须设置的动态输入组件（v-selects和v-text-fields）。然而，我真的很难理解一旦用户提交表单，如何从这些输入组件中检索值。我的输入设置如下所示：

<v-row>
  <v-col
    v-for="(item, index) in documentTags.tags"
    :key="index"
    cols="18"
    sm="8"
    md="6"
  >
    <v-select
      v-if="item.InputType === 'Combobox'"
      :v-model="documentTagResponses[index]"
      :name="item.Name"
      :items="item.TagValueOptions"
      :rules="rules.ComboboxRule"
      item-text="Value"
      :label="item.Name"
      required
    >
    </v-select>
    <v-text-field
      v-else-if="item.InputType === 'Textbox'"
      :v-model="documentTagResponses[index]"
      :name="item.Name"
      :label="item.Name"
      :rules="rules.TextboxRule"
      required
    >
    </v-text-field>
  </v-col>
</v-row>

{
  tags: [
    {
      TagDefinitionId: '1',
      InputType: 'Combobox',
      Name: 'Name_1',
      TagValueOptions: [
        {
          Value: 'Option 1',
        },
        {
          Value: 'Option 2',
        },
        {
          Value: 'Option 3',
        },                
      ],
    },
    {
      TagDefinitionId: '2',
      InputType: 'Textbox',
      Name: 'Name_2',
      TagValueOptions: [],
    },
  ],
}

export default {
name: 'MyModal',
data: () => ({
    documentTagResponses: [],
}),
methods: {
    validate() {
        const valid = this.$refs.form.validate();
        if (valid) { 
            for (const key of Object.keys(this.documentTagResponses)) {
                console.log(`${key} -> ${this.documentTagResponses[key]}`);
            }
        }
    },
};

我试图将这些输入的表单响应绑定到一个名为documentTagResponses的数组。 比如说：

<v-row>
  <v-col
    v-for="(item, index) in documentTags.tags"
    :key="index"
    cols="18"
    sm="8"
    md="6"
  >
    <v-select
      v-if="item.InputType === 'Combobox'"
      :v-model="documentTagResponses[index]"
      :name="item.Name"
      :items="item.TagValueOptions"
      :rules="rules.ComboboxRule"
      item-text="Value"
      :label="item.Name"
      required
    >
    </v-select>
    <v-text-field
      v-else-if="item.InputType === 'Textbox'"
      :v-model="documentTagResponses[index]"
      :name="item.Name"
      :label="item.Name"
      :rules="rules.TextboxRule"
      required
    >
    </v-text-field>
  </v-col>
</v-row>

{
  tags: [
    {
      TagDefinitionId: '1',
      InputType: 'Combobox',
      Name: 'Name_1',
      TagValueOptions: [
        {
          Value: 'Option 1',
        },
        {
          Value: 'Option 2',
        },
        {
          Value: 'Option 3',
        },                
      ],
    },
    {
      TagDefinitionId: '2',
      InputType: 'Textbox',
      Name: 'Name_2',
      TagValueOptions: [],
    },
  ],
}

export default {
name: 'MyModal',
data: () => ({
    documentTagResponses: [],
}),
methods: {
    validate() {
        const valid = this.$refs.form.validate();
        if (valid) { 
            for (const key of Object.keys(this.documentTagResponses)) {
                console.log(`${key} -> ${this.documentTagResponses[key]}`);
            }
        }
    },
};

---

然后，当用户单击submit按钮时，我调用validate函数以确保组件有效，然后对值执行一些操作。。。现在我只是想把每个组件的值打印到控制台上。但是，我的documentTagResponses数组始终为空。有人知道为什么我无法访问这些组件中设置的值吗？

我刚刚在项目中测试了您的代码，问题是

：v-model

我们不需要在v型中使用

：

因此，代码可以如下所示

<v-row>
  <v-col
    v-for="(item, index) in documentTags.tags"
    :key="index"
    cols="18"
    sm="8"
    md="6"
  >
    <v-select
      v-if="item.InputType === 'Combobox'"
      v-model="documentTagResponses[index]"
      :name="item.Name"
      :items="item.TagValueOptions"
      :rules="rules.ComboboxRule"
      item-text="Value"
      :label="item.Name"
      required
    >
    </v-select>
    <v-text-field
      v-else-if="item.InputType === 'Textbox'"
      v-model="documentTagResponses[index]"
      :name="item.Name"
      :label="item.Name"
      :rules="rules.TextboxRule"
      required
    >
    </v-text-field>
  </v-col>
</v-row>

哦，伙计。真是个新手犯的错误。谢谢我理解有经验的开发人员有时很难发现这种错误。那样的话，把它带给初学者吧！