Question

我正在构建一些逻辑第二个嵌套选择框，基本上我加载一个json文件并将数据传递给我的vuejs组件中的数组，json包含2选择框的逻辑，例如我想要的Business Developemnt在第二个框中加载财务建议书和主许可证......：

{
    "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绑定，它应该是选项所代表的值。

<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/

更改第一个

1 个答案: