CODEWITHSUNDEEP
vue.js
Ramesh Selvakumar
Ramesh Selvakumar

Reputation: 78

Vue js Bind the dropdown based on conditions

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

Upvotes: 2

Views: 1499

Answers (3)

Richi Sharma
Richi Sharma

Reputation: 185

Please try adding v-if for checking the condition

Upvotes: 2

Kathir S
Kathir S

Reputation: 81

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>

Upvotes: 2

Solai Kannan
Solai Kannan

Reputation: 61

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>

Upvotes: 2

Related Questions