How do i bind select box with input in vuejs?

Question

I try to bind select box with input so I have a select box with pre defined options and when selected that option will be in the input and when the user types text in the input a dynamic new select option should be made if it is not in the pre defined list else it should match on one of the items.

<div class="col-md-2 text-center">          
   <select class="form-control" v-model="selected">
    <option v-for="item in inventory" :value="item" :key="item.id">
      @{{ item.name }}
    </option>
  </select>
  <p>
    @{{ selected.id}}
  </p>            
</div>

<input v-model="inputBind" placeholder="," type="text" class="form-control">

and

 new Vue({
    el:'#app',
     data:{
       inputBind:'',
       inventory: [
          {name: 'MacBook Air', id: 1},
          {name: 'MacBook Pro', id: 2},
          {name: 'Lenovo W530', id: 3},
          {name: 'Acer Aspire One', id: 4}
        ],
        selected: 2
      },
     created: function() {
          this.selected = this.inventory.find(i => i.id === this.selected);
      },

When a user adds text in the input element, how should that be selected in the select? Do you mean that what they enter should be added as an option? — Bert
– Bert, Commented Aug 22, 2017 at 22:25
yes ! it should bind the input with select so the user will have 2 option one to get from select and one if he want custom — Adrian kevin
– Adrian kevin, Commented Aug 23, 2017 at 7:28

Vincent T · Accepted Answer · 2017-08-23 08:36:08Z

4

Use the the same data attr for the input, check js fiddle that way data is shared by both the inputs. Its is the easiest way. Note that for the select box to select the correct option now you must enter the matching value. Don't know what the reason is you need it this way but its not that user friendly.

Js

new Vue({
el: '#app',
data: {
    selected: 'item1',
    input: '',
    items: {
      1: {id: 1, val: 'item1'},
        2: {id: 2, val: 'item2'},
        3: {id: 3, val: 'item3'},
    }
  }
});

Html

<div id="app">

  <select class="form-control" v-model="selected">
    <option v-for="item in items" :value="item.val" :key="item.id">
     {{ item.val }}
    </option>
  </select>

  <p>
    {{ selected }}
  </p>

  <input v-model="selected" placeholder="," type="text" />

</div>

edited Aug 23, 2017 at 8:36

answered Aug 23, 2017 at 6:27

Vincent T

3,3322 gold badges11 silver badges18 bronze badges

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

14 Comments

Adrian kevin Over a year ago

where do you bind input ?

Vincent T Over a year ago

@Adriankevin Input is bound on the same data attr selected so it shares the same value as the select box.

Adrian kevin Over a year ago

ok and if have put other attr from input to cars for example how do i bind i need to learn it :) normaly i bine with v-model i don't see it :)

Adrian kevin Over a year ago

loool now i see it you put selected sorry by bad :)

Adrian kevin Over a year ago

when i put in the input data who can i see the option in select the bind works but it don't show it.

|

Holtwick · Accepted Answer · 2019-06-17 09:12:03Z

2

You can bind to change and which is fired after the model value has been updated like so:

<select class="form-control" v-model="selected" @change="doSomethingWithChangedValue">
    <option v-for="item in inventory" :value="item" :key="item.id">
      @{{ item.name }}
    </option>
</select>

answered Jun 17, 2019 at 9:12

Holtwick

2,01625 silver badges33 bronze badges

Collectives™ on Stack Overflow

How do i bind select box with input in vuejs?

2 Answers 2

14 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related