In my code snippet, I am attempting to build a simple form builder application. The goal is to include multiple select fields in the form.
I encountered a problem with passing an array into a loop. Despite my efforts, the code did not work as expected. However, I am hopeful that you can understand the desired outcome I am aiming for.
<template>
<div>
<div v-for="(input, index) in formBuilder" :key="index">
<h1>{{ input.name }}</h1>
<div>
Options:<br />
{{ formBuilder.options }}
</div>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
formBuilder: [
{
name: "Name",
options: this.versions,
},
{
name: "Host",
options: this.countryList,
},
],
};
},
computed: mapState(["versions", "countryList"]),
};
</script>
UPDATE. I have made modifications to provide a working version of the code. While it functions correctly now, I am curious if there is a more efficient approach. Is this method considered best practice?
The updated code:
<template>
<div>
<div v-for="(input, index) in formBuilder" :key="index">
<h1>{{ input.name }}</h1>
<div>
Options:<br />
{{ input.options }}
</div>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
formBuilder: [
{
name: "Name",
options: [],
},
{
name: "Host",
options: [],
},
],
};
},
created() {
this.formBuilder[0].options = this.versions;
this.formBuilder[1].options = this.countryList;
},
computed: mapState(["versions", "countryList"]),
};
</script>