JSFiddle - React, Tailwind, and code Playground

by Jussia

HTML

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

JavaScript

new Vue({
  el: '#app',
  data: {
    entity: [
      {
        "id": 1,
        "name": "title",
        value: ''
      },
      {
        "id": 2,
        "name": "address",
        value: ''
      }
    ]
  },
  computed: {
    item() {
      return this.entity.reduce((item, n) => ({ ...item, [n.name]: n.value }), {})
    }
  },
    mounted() {
     console.log('this.item', this.item);
        let data = {title: "121title", address: "111address"};
        for (var i = 0, max = this.entity.length; i < max; i++) {
          this.entity[i].value = data[this.entity[i].name]
          console.log('data[this.entity[i].name]', this.entity, data[this.entity[i].name])
        }
    }
});