对嵌套选择有默认选择

时间:2017-07-21 09:23:24

标签: javascript html vue.js vuejs2 options

我正在构建两个嵌套的选择选项,其中第二个取决于第一个 我已经建造了它们并且它们正在工作。问题是每当我更改第一个时,第二个选择框默认值都不会显示。

当我第一次进入时它会更新,因为我为它设置了初始值。

这是我的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
        }
    ]
}

任何帮助? 感谢

0 个答案:

没有答案
相关问题