2つの選択タグの間にvuejs入力依存関係を作成する

Question

2つのフォーム選択オプションの間に依存関係を作成しようとすると、2番目の選択タグでは最初のオプション選択に基づいてデータを表示します。私は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"値になりたい：フォームの私の関連部分はこのようになります。 ので包み、ユーザーはどのような実際にhappenningは罪にコードのこの部分を表示するものであるプロバイダとしてrevcontentを選んだが、彼は、たとえばアドセンスを選択した場合、ロジックはこれに変更sould：

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

：私はのような解決策を試してみました

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

と

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

が、彼らは明らかに私は、ベストプラクティスとして検討していく方法でこれをachiveすることができますどのように任意のアイデアを動作しませんでした？ 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>