Currently, I am utilizing vue-bootstrap for creating input fields using a v-for directive. The objective is quite similar to the example provided in this link. However, I am encountering some difficulties in obtaining the data collected from these inputs into a v-model directive.
One possible approach would be manually assigning each field and mapping it to a v-model for my object. However, if there exists a more efficient solution to tackle this issue, I would greatly appreciate any guidance on this matter.
The code snippet below is essentially copied from the examples page but with my unsuccessful modifications (along with comments):
<template>
<b-container fluid>
<code>{{result}}</code>
<b-row class="my-1" v-for="type in types" :key="type">
<b-col sm="3">
<label :for="`type-${type}`">Type {{ type }}:</label>
</b-col>
<b-col sm="9">
<!-- My modification to the v-model part -->
<b-form-input :id="`type-${type}`" :type="type" :v-model="`result.${type}`"></b-form-input>
</b-col>
<!-- Additional "v-model" added corresponding to the previous line of code -->
<p>{{`result.${type}`}}</p>
</b-row>
</b-container>
</template>
<script>
export default {
data() {
return {
// Defining the result object to store data as expected structure shown below:
/*
result: {
text: "the text",
password: "the password"
...
...
}
*/
result: {},
types: [
'text',
'password',
'email',
'number',
'url',
'tel',
'date',
`time`,
'range',
'color'
]
}
}
}
</script>If anyone could shed light on where I might be going wrong, it would be greatly appreciated. I have attempted to search for documentation related to the `"type-${type}"` in the v-for statement, but unfortunately, I was unable to locate relevant information on this topic.