[Vuejs]-Props values not rendering in vuejs

by

2👍

You are setting literal values inside your loop, you need to use v-bind: or the shorthand ::

<input
  :type="field.type"
  :name="field.name"
  :id="field.id"
  :class="field.inputClass"
  :placeholder="field.placeholder"
  :required="field.required"
  v-model="field.model"
/>

EDIT

You cannot bind v-model that way, instead you will need to bind it to data. The easiest way is to create a values array and then set it up in your created hook of your component. Vue doesn’t bind to arrays directly, so you have to push an object onto the array:

created() {
  this.inputs.forEach((input) => {
    // push new value object to array
    this.values.push({value: input.value})    
  });
},
data() {
  return {
    values: []
  }
}

Now, inside your v-for you can bind you inputs to the values with index:

  <div v-for="(input, index) in inputs">
    <input  v-model="values[index].value" />
  </div>

And here’s the working JSFiddle:

https://jsfiddle.net/xsg91o04/

👤craig_h

Leave a comment