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);
      },

Solution 1

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>

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

Comments

[Bert]

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?

[Adrian kevin]

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]

where do you bind input ?

[Vincent T]

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

[Adrian kevin]

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]

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

[Adrian kevin]

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

[Vincent T]

@Adriankevin Sorry my bad forgot to fill in the value of the option, edited the Js fiddle to print the val in the option tag

[Adrian kevin]

can you modify it to show new option in selected when i put in input ?

[Vincent T]

It already does it ? if i type option1 or option2 in the input it changes the select box value. Or what do you mean?

[Adrian kevin]

if i put in input for example 'abc' in the select box and input is blank, maybye it needed to push new string in array select ?

[Adrian kevin]

try to put something to input to see, In the select box it don't apper it bind the value but it don't show there.

[Vincent T]

So you actually want the input to dynamicaly add a option if it does not exitst in the list else select an existing ?

[Adrian kevin]

yes :) add an option if not exist and select, If exitst put that one

[Vincent T]

@Adriankevin updated the fiddle, needs some refinement but roughly it works

[Quantum]

Hello @Vincent T I want some help in select-option, can you please have a look at this stackoverflow.com/questions/67647128/…