vuejs input not showing value

Question

Input binding issue

:value not showing the value no syntax error but when I use {{ row.item.FEE }} somewhere else then it works fine.Why it is not showing value in input filed. Please help.

    <b-form-input
      :value="row.item.FEE"
      v-model="model.Fee[row.item.id]"
      @change="changeField('FEE', model.Fee, row.item.id)"
    ></b-form-input>

Answer 1

I have made some modification to make thing works.

Here is my updated code

<b-form-input :value="row.item.MIN" @change="changeField('MIN', $event, row.item.id)"></b-form-input>

Removed v-model so I can see the value in input field. Used $event to get updated value on @Change Event.

I hope it helps.

Answer 2

See: https://v2.vuejs.org/v2/guide/forms.html

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

Try passing it to the function instead. Moreover, I do think you should use a method for v-model

methods.modelFee = function(id){
    return this.model.Fee[id]
}

    <b-form-input
      v-model="modelFee(row.item.id)"
      @change="changeField('FEE', model.Fee, row.item.id,row.item.FEE)"
    ></b-form-input>

Answer 3

There are :value and v-model , but :value will be ignored and not needed.

To initialize the value of b-form-input , you can set v-model value mode.Fee[row.item.id] as your expected value row.item.FEE when the component is mounted.

  <b-form-input
      v-model="model.Fee[row.item.id]"
      @change="changeField('FEE', model.Fee, row.item.id)"
    ></b-form-input>
...
  mounted() {
     this.model.Fee[this.row.item.id] = this.row.item.FEE;
  },