Vuejs b-form-input - Unable to type when using v-model

Question

I'm using a b-form-input with b-form-datalist. The input text boxes will be added dynamically (one per row).

To start off, it lists a few entries. Once a value is chosen, the chosen value will be added to a list using v-model.

<div id="app">
  <div v-for="(chosen, index) in chosenValues" :key="chosen.value + '-' + index">
      <b-col cols="4">
          <b-form-input
               list="dropdown"
               v-model="chosen.value"
           ></b-form-input>
           <b-form-datalist id="dropdown" :options="elements"></b-form-datalist>
      </b-col>
  </div>
</div>

Javascript:

new Vue({
  el: '#app',
  data: {
    elements: ['apple', 'orange', 'banana', 'avocado'],
    chosenValues: [{value: ''}] //will be added dynamically when a new text box is added
  }
})

The problem with this code is that I'm not able to type into the text box i.e., the focus goes away after typing a character - Fiddle-1

If I remove the v-model property or change it into v-bind, it works fine - Fiddle-2

Fab · Accepted Answer · 2019-11-12 16:34:53Z

1

I think there's some conflict using the value property.

I tried to replace value with val and everything works fine.

Here's the working jsfiddle

answered Nov 12, 2019 at 16:34

Fab

4,6572 gold badges26 silver badges47 bronze badges

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

7 Comments

Thiyagu Over a year ago

Yes. You are right. Wow.. Is this a bug or did I do something that I shouldn't have (by missing something that is documented)?

Fab Over a year ago

Could be a bug. However, I usually avoid using standard javascript keyword for property or variable names.

Thiyagu Over a year ago

Sorry for unaccepting. If I change the :key too to val, it stops working again. So, I think the issue is in the key attribute's value and not the property name

Thiyagu Over a year ago

When we type, the v-model property changes, which affects the key. I think that is the problem.

Thiyagu Over a year ago

Thanks for your time. You helped me figure out the mistake :)

|

Thiyagu · Accepted Answer · 2019-11-12 16:56:35Z

1

Thanks to @fabruex's answer which led to the complete answer.

The issue was in :key="chosen.value + '-' + index". When typing into the input text, it binds the inputed value to the v-model's property. This affects the key's value/bindings. This should be the reason for the problematic behavior.

Changing the key to :key="'element-' + index" fixes the issue.

I welcome better explanations for this :)

answered Nov 12, 2019 at 16:56

Thiyagu

18k5 gold badges49 silver badges88 bronze badges

3 Comments

Fab Over a year ago

this happens because changing the key of a component is like remounting it. That's why the focus disappears

Thiyagu Over a year ago

@fabruex Interesting that it works when using v-bind. Is it because it is one-way binding?

Fab Over a year ago

v-bind:key? or v-bind:value? If the second case, yes.

Collectives™ on Stack Overflow

Vuejs b-form-input - Unable to type when using v-model

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related