Vue js Bind the dropdown based on conditions

Question

I have a drop down which contains collection of objects. Drop down should bind by default based on condition

<tr v-for="item in binSalesList">\
  <template v-if="item.IsRemovedBin != isRemoved">\
    <td>{{item.LotteryBinId}}</td>\
    <td>
      <select v-model="item.UpcDescription" v-on:change="upcList_Click(item)">\
        <option v-for="upc in upcList">{{ upc.UpcDescription }}</option>\
    </td>\
    <td>{{item.UPCPrice}}</td>\
    <td>
      <input type="textbox" v-model="item.TicketSoldQty" v-on:keyup="item.TicketSoldAmount=(item.TicketSoldQty*item.UPCPrice)" maxlength="4" size="4" onkeypress="app.checkIntegerValue();" />
    </td>\
    <td>
      <input type="textbox" v-model="item.TicketSoldAmount" maxlength="4" size="4" onkeypress="app.checkIntegerValue();" />
    </td>\
  </template>\ </tr>\

what's that slash at the end of each tag? also please insert your vue syntax. — claudios
– claudios, Commented Feb 21, 2017 at 9:18
\ is added to write HTML in template of a component in Vue JS — Ramesh Selvakumar
– Ramesh Selvakumar, Commented Feb 21, 2017 at 9:20

Kathir S · Accepted Answer · 2017-02-21 09:20:46Z

2

You have to bind the data in the option tag. Please use the code below,

<option v-for="upc in upcList" v-bind:selected="A.column== B.column" :value="upc.column">{{ upc.column }}</option>

answered Feb 21, 2017 at 9:20

Kathir S

814 bronze badges

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

Comments

Solai Kannan · Accepted Answer · 2017-02-21 09:19:23Z

2

try this

<select v-model="item.UpcDescription" v-on:change="upcList_Click(item)">\
                                 <option v-for="upc in upcList" 
v-bind:selected="upc.UpcDescription == item.UpcDescription" 
:value="upc.UpcDescription">{{ upc.UpcDescription }}</option>

answered Feb 21, 2017 at 9:19

Solai Kannan

614 bronze badges

Comments

Richi Sharma · Accepted Answer · 2017-02-21 09:30:47Z

2

Please try adding v-if for checking the condition

answered Feb 21, 2017 at 9:30

Richi Sharma

2072 silver badges15 bronze badges

Collectives™ on Stack Overflow

Vue js Bind the dropdown based on conditions

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related