How to populate dynamically created inputs via v-model?

Question

Vue.js

I need to dynamically generate inputs. Well, through v-model to receive and fill in the data
I tried to implement it myself here . It turns out to receive data, but not to fill (

Answer 1

Add a value property to each element of the array, and specify it in v-model. And make item a computed property from a regular property.

data: () => ({
  entity: [
    { id: 1, name:   'title', value:   'default title' },
    { id: 2, name: 'address', value: 'default address' },
  ],
}),
computed: {
  item() {
    return this.entity.reduce((acc, n) => (acc[n.name] = n.value, acc), {});
  },
},

<div v-for="n in entity" :key="n.id">
  <label>
    {{ n.name }}
    <input type="text" v-model="n.value">
  </label>
</div>