How to use HTML input, select, checkbox field in Vue JS loop and get the data's as Array

Question

I have this for lop in my Vue JS application:

<b-form>    
    <table class="table">
        <thead>
            <tr>
                <th>Import Field</th>
                <th>Project Field</th>
                <th>Select</th>
            </tr>
        </thead>
        <tbody>
            <tr
                v-for="(data, index) in projectFieldOptions"
                :key="index"
            >
                <td>
                    <b-form-input
                        class="basicInput"
                        v-model="data.text"
                    />
                </td>
                <td>
                    <b-form-select
                        v-model="
                            selectedProjectOption
                        "
                        :options="
                            projectFieldOptions
                        "
                    />
                </td>
                <td>
                    <b-form-checkbox
                        v-model="selectMap"
                        checked="false"
                        name="check-button"
                        switch
                        inline
                    >
                    </b-form-checkbox>
                </td>
            </tr>
        </tbody>
    </table>
    <b-button
        variant="primary"
        type="submit"
        @click.prevent="validateEditMapping"
    >
        Next
    </b-button>
</b-form>

It's showing this output:

You can see there are 3 fields:

1. Import Field ( as input box )
2. Project Field ( as select dropdown )
3. Select ( as checkbox )

Now,

1. How can I get all the input, select and checkbox fields as array in Vue JS?
2. If I change the Project field dropdown then other dropdowm is also changed but it's should change my selected dropdown only. How can I solve it?

I want the output should like this:

[
   { item, imte, 0 },
   { description, description, 1},
    ....
]

Answer 1

I will start with the answer to the second question. Just like you have data.text assigned to v-model in b-form-input, you should make something similar for b-form-select and b-form-checkbox e.g.

<b-form-select
  v-model="data.selectedProjectOption"
  :options="projectFieldOptions"
/>

otherwise, you will have selectedProjectOption variable assigned to every b-form-select component, so if you change its value in one of them it will change the value in others as well.

For the first question, let's assume you projectFieldOptions look like this:

projectFieldOptions = [
  {text: 'text', selectedProjectOption: 'option', selectMap: 0, ...},
  {text: 'text1', selectedProjectOption: 'option1', selectMap: 1, ...},
  ...,
]

you can map this array to receive desired output.

const projectFieldOptions = [{
    text: 'text',
    selectedProjectOption: 'option',
    selectMap: 0
  },
  {
    text: 'text1',
    selectedProjectOption: 'option1',
    selectMap: 1
  },
]

const mappedArray = projectFieldOptions.map((e) => {
  return [e.text, e.selectedProjectOption, e.selectMap]
});

console.log(mappedArray);