CODEWITHSUNDEEP
javascriptjsonvue.jsvuejs2
Filipe Costa
Filipe Costa

Reputation: 555

Nested select box issue changing the first one

I am building some logic ith 2 nested select box, basicly i load a json file and pass the data to an array in my vuejs component, the json contains the logic for the 2 select box for example for Business Developemnt i want to load in the second box Financial Proposal and Master Licence...:

{
    "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 already accomplish something like that, the issue is that when i change the first select box, the second is empty at position 1, like this:

image

here is my code:

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

thank you! :)

Upvotes: 1

Views: 780

Answers (1)

Evaldo Bratti
Evaldo Bratti

Reputation: 7678

You are missing value bind of each option, that should be the value that option represents.

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

and for an automatic selection when the first select changes, you can use a watcher

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

I tried to simulate your component here, maybe it help you

https://jsfiddle.net/9uke1596/

Upvotes: 1

Related Questions