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>

@Antonio because I need to show older value :value="row.item.FEE" — Peter
– Peter, Commented Aug 24, 2019 at 11:08

Peter · Accepted Answer · 2019-08-24 11:33:01Z

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.

answered Aug 24, 2019 at 11:33

Peter

8062 gold badges15 silver badges35 bronze badges

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

Comments

Diamond · Accepted Answer · 2019-08-25 19:18:09Z

0

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

answered Aug 25, 2019 at 19:18

Diamond

3,4804 gold badges21 silver badges43 bronze badges

4 Comments

Peter Over a year ago

Value is not initializing using v-model="model.Fee[row.item.id]"

Diamond Over a year ago

@Peter Did you try? How do you know about that?

Peter Over a year ago

Yes i have tested with your approach and got error [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'item' of undefined"

Diamond Over a year ago

@Peter Could you provide more codes? I can't understand what is your real problem. According to your current codes, I can only say you don't need to use :value.

tony19 · Accepted Answer · 2022-07-15 04:52:19Z

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>

Collectives™ on Stack Overflow

vuejs input not showing value

3 Answers 3

Comments

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Related