create vuejs form input dependency between two select tags

Question

trying to create a dependency between two form select options where in the second select tag i would like to show data based on the first option select. I know i can use v-if but it's not really giving me a solution that feels like best practice. my relevant part of the form looks like this:

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

now here in my code im using provider name hardcoded -> revcontent but i would like this value to be the v-model="form.provider" value. so incase user chose revcontent as provider what actually happenning is what show sin this piece of code but if he chose adsense for example the logic sould change to this:

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

I tried solutions like:

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

and

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

but they obviously didn't work any idea how can i achive this in a way that will consider as best practice ?? thx

tony19 · Accepted Answer · 2022-07-16 01:25:34Z

1

You can use a computed property to return the options for the 2nd select based on the first select's v-modellike this:

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

Then you can loop through this computed [property like this :

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

edited Jul 16, 2022 at 1:25

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 16, 2017 at 9:52

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

create vuejs form input dependency between two select tags

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related