javascript - 嵌套选择框问题更改第一个

Question

我正在用 2 个嵌套的选择框构建一些逻辑，基本上我加载一个 json 文件并将数据传递到我的 vuejs 组件中的一个数组，json 包含 2 个选择框的逻辑，例如我想要的业务开发加载第二个框财务提案和主许可证...:

{
    "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
        }

我已经完成了类似的事情，问题是当我更改第一个选择框时，第二个选择框在位置 1 处为空，如下所示:

这是我的代码:

<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: []
    }
  },

谢谢! :)

Answer 1

您缺少每个选项的 value 绑定(bind)，这应该是该选项代表的值。

<option v-for="(item,index) in documentNested[docData.documentType]" :value="item">{{item.text}}</option>

对于第一个选择更改时的自动选择，您可以使用观察者

watch: {
    'docData.documentType'(val) {
        this.docData.documentSelection = this.documentNested[val][0];
    }
}

我在这里模拟了你的组件，也许对你有帮助

https://jsfiddle.net/9uke1596/