我正在构建两个嵌套的选择选项,其中第二个取决于第一个 我已经建造了它们并且它们正在工作。问题是每当我更改第一个时,第二个选择框默认值都不会显示。
当我第一次进入时它会更新,因为我为它设置了初始值。
这是我的lopp代码:
<div class="form-group">
<label class="control-label col-sm-3">Document Type</label>
<div class="col-sm-9">
<select class="form-control" v-model="firstOption">
<option v-for="(item,index) in documentType">
{{ index }}
</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Document Selection</label>
<div class="col-sm-9">
<select class="form-control" v-model="secondOption">
<option v-for="(item,index) in documentType[firstOption]">
{{item.text}}
</option>
</select>
</div>
</div>
我的数据:
import data from '../interfaceData/documentType.json'
import permissions from '../interfaceData/permissions.json'
export default {
name: 'app',
data() {
return {
firstOption: "Business Development",
secondOption: "Financial Proposal",
documentType: data,
}
},
表示嵌套lopps的文档类型是从json加载的,如下所示:
{
"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
}
],
"Delivery": [
{
"text": "Acceptance Protocol",
"key": 1
},
{
"text": "Acceptance Protocol For Implementation Projects",
"key": 2
},
{
"text": "Installation Manual",
"key": 3
},
{
"text": "Product Release Notes",
"key": 4
},
{
"text": "Product Update Release Notes",
"key": 5
},
{
"text": "Release Checklist",
"key": 6
},
{
"text": "Release Notes",
"key": 7
},
{
"text": "Release Strategy",
"key": 8
},
{
"text": "Release Manual",
"key": 8
}
],
"Financial": [
{
"text": "Monthly Consultant Report",
"key": 1
}
],
"Generic": [
{
"text": "General Document",
"key": 1
},
{
"text": "Meeting Minutes",
"key": 2
},
{
"text": "Memorandum",
"key": 3
}
],
"Human Resources": [
{
"text": "Acordo de Confidencialidade CMF",
"key": 1
},
{
"text": "Acordo Sobre Isenção de Horário de Trabalho",
"key": 2
},
{
"text": "Contrato de Trabalho a Termo Certo",
"key": 3
},
{
"text": "Software Discharge of Responsability",
"key": 4
},
{
"text": "Termo de Responsabilidade de Software",
"key": 5
}
],
"Project Management": [
{
"text": "CloseDown Meeting Minutes",
"key": 1
},
{
"text": "Kick Off Meeting Minutes",
"key": 2
},
{
"text": "Progress Meeting Minutes",
"key": 3
}
],
"Quality Management": [
{
"text": "Incident Report",
"key": 1
},
{
"text": "Policy Definition",
"key": 2
}
],
"Specification Documents": [
{
"text": "Software Architecture Specifications",
"key": 1
},
{
"text": "Software Detailed Design",
"key": 2
},
{
"text": "Software Requirements Specification",
"key": 3
},
{
"text": "System Requirements Specification",
"key": 4
},
{
"text": "Task Breakdown",
"key": 5
},
{
"text": "Tecnical Specification",
"key": 6
},
{
"text": "Tecnical Specification For Implementation Projects",
"key": 7
},
{
"text": "User Requirement Specifications",
"key": 8
}
],
"Testing": [
{
"text": "Test Case Specification",
"key": 1
},
{
"text": "Test Plan",
"key": 2
},
{
"text": "Test Report",
"key": 2
}
],
"Training": [
{
"text": "Attendance Sheet",
"key": 1
}
]
}
任何帮助? 感谢