In my Vue.js component, I am working on a logic involving two nested select boxes. I load data from a JSON file and pass it to an array within the component. The JSON file contains the logic for the two select boxes. For example, under "Business Development" in the first box, I want to load options like "Financial Proposal" and "Master Licence and Service Agreement":
{
"Business Development": [
{
"text": "Financial Proposal",
"key": 1
},
{
"text": "Master Licence and Service Agreement",
"key": 2
},
{
"text": "Non-Disclosure Agreement",
"key": 3
},
{
"text": "Relatório de Missão",
"key": 4
}
],
"Configuration Management": [
{
"text": "Configuration Management Plan",
"key": 1
},
{
"text": "Configuration Management Plan For Implementation Projects",
"key": 2
}
I have managed to achieve this functionality. However, when I change the selection in the first select box, the second one becomes empty at position 1, as shown here:
https://i.sstatic.net/W7aCY.png
Here is the relevant code snippet:
<template>
<div class="row margin-above2 box">
<h3 class="text-center">Template</h3>
<img width="70px" height="70px" class="img img-responsive" src="static/img/word.png">
<form class="box-body form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control" v-model="docData.documentType">
<option v-for="(item,index) in documentNested">
{{ index }}
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<select class="form-control" v-model="docData.documentSelection">
<option v-for="(item,index) in documentNested[docData.documentType]">{{item.text}}</option>
</select>
</div>
</div>
</form>
</div>
</template>
<script>
import data from '../../interfaceData/documentType.json'
import permissions from '../../interfaceData/permissions.json'
export default {
name: 'app',
data () {
return {
checked: false,
documentNested: data,
permissions: permissions,
listItems: [],
documentData: []
}
},
Your assistance would be highly appreciated! :)