嵌套選擇框問題更改第一個

我正在構建一個邏輯ith 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: [] 
    } 
    },

謝謝！ :)

來源

2017-08-31 Filipe Costa

一旦文檔類型發生變化，您是否想要選擇第一個可用文檔？ –

是的，類似的東西 –

您缺少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/

來源

2017-09-01 19:34:28

你的解決方案几乎是完美的，只是有一個問題，我第一次沒有得到元素 –

如果我刪除：值我第一次知道爲什麼？ –

你的意思是，如果你在第一次選擇時打開第二次選擇而沒有選擇？ –

嵌套選擇框問題更改第一個

回答

相關問題