在兩個選擇標籤之間創建vuejs表單輸入依賴關係

Question

嘗試在兩個表單選擇選項之間創建依賴關係，其中第二個選擇標籤中我想根據第一個選項選擇顯示數據。我知道我可以使用v-if，但它並不真的給我提供最佳實踐的解決方案。現在

<el-form-item label="Provider"> 
    <el-select v-model="form.provider" placeholder="select provider"> 
     <el-option v-for="provider in form.providers" 
        :label="provider" 
        :value="provider">{{provider}} 
     </el-option> 
    </el-select> 
</el-form-item> 
<el-form-item label="Accounts"> 
    <el-select v-model="form.account" placeholder="Select account"> 
     <!--****here it is****--> 
     <el-option v-for="account in form.accounts.revcontent" 
        label="account" 
        value="account">{{account}}</el-option> 
    </el-select> 
</el-form-item> 

在這裏我的代碼即時通訊使用硬編碼的提供者的名稱 - >revcontent，但我想這個值是v-model="form.provider"值：我的表格的相關部分看起來是這樣的。 所以櫃面用戶選擇了revcontent作爲供應商究竟happenning就是表明罪這段代碼，但如果他選擇的AdSense例如邏輯前人的精力改成這樣：

<el-option v-for="account in form.accounts.adsense"...> 

我試着像解決方案：

v-for="account in form.accounts.form.provider" 

和

v-for="account in form.accounts.{{form.proivder}}" 

，但他們顯然沒有工作任何想法我如何能實現這一目標的方式，將考慮作爲最佳做法？ THX

Answer 1

可以使用computed property返回的第二選項基於第一選擇的v-model這樣的選擇：

computed: { 
    secondSelect(){ 
     return this.form.accounts[this.form.provider]; 
    } 
} 

然後你可以通過這個計算的[屬性這樣的循環：

<el-form-item label="Provider"> 
    <el-select v-model="form.provider" placeholder="select provider"> 
     <el-option v-for="provider in form.providers" 
        :label="provider" 
        :value="provider">{{provider}} 
     </el-option> 
    </el-select> 
</el-form-item> 
<el-form-item label="Accounts"> 
    <el-select v-model="form.account" placeholder="Select account"> 
     <!--****here it is****--> 
     <el-option v-for="account in secondSelect" 
        label="account" 
        value="account">{{account}}</el-option> 
    </el-select> 
</el-form-item>