为动态生成的选择输入设置和获取值

Question

我使用下面的代码生成了几个select fields：

<tr v-for="(dataPreview,index) in dataPreviewList" :key="dataPreview.headers">
    <td>{{ dataPreview.headers }}</td>
    <td>{{ dataPreview.sample }}</td>
    <td>
        <b-select :name="'selectedField' + index" v-model="systemField[index]">
            <option value="1">First Name</option>
            <option value="2">Last Name</option>
            <option value="3">Matrix Number</option>
            <option value="4">Father's Name</option>
            <option value="5">Father's ID</option>
            <option value="6">Mother's Name</option>
            <option value="7">Mother's ID</option>
            <option value="8">Contact Number</option>
        </b-select>
    </td>
</tr>

问题是我不确定如何设置字段的默认值（初始选择），然后如何获取所有b-select 的选定值。我需要的是，例如如果dataPreviewList长度为7，第一个b-select应该有<option value="1">First Name</option>作为默认值，第二个b-select应该有<option value="2">Last Name</option>作为默认值等等。

在我的js中；

data() {
    return {
        dataPreviewList: [],
        selectedField: [],
        systemField: []
    }
}

Answer 1

在您的挂载方法中，您可以循环您的列表并应用该逻辑。在这种情况下，您将其绑定到该索引的 systemField 并将值设置为 index+1（因为它是从 0 开始的）以实现该结果。

mounted() {
  this.dataPreviewList.forEach((dataPreview, index) => {
    this.$set(this.systemField, index, index+1)
  })
}