Vue fill array of multiple json (keys and values)

by xlanex

HTML

<script src="vue-json-edit"></script>
<div id="app">
  <h2>Phones</h2>
  <p>{{phones.phone}}</p>              
     <ul>

      <li v-for="(phone, index) in phones.phone">
        <p v-for="(value, key) in phone">
          {{ phones.phone.indexOf(phone) }}
          <input type="text" v-model="key" @blur="modifyPhone(index, key, value)"/>
          <input type="text" v-model="value" @blur="modifyPhone(index, key, value)"/>
          <button @click="deletePhone(index)">remove</button>
          <!-- <button @blur="modifyPhone(index, key, value)">modify</button> -->
        </p>
      </li>
    </ul>

  <input type="text" v-model="newPhoneKey">
  <input type="text" v-model="newPhoneValue">
  
  <button @click="addPhone">save</button>
</div>

Vue

new Vue({
  el: "#app",
  data: {
  	newPhone: "",
    phones: {
    "id": 4,
    "firstname": "fwefewfwfwfe",
    "phone": [
                {
                    "iphone": "124568"
                },
                {
                    "maison": "154684"
                }
            ]
		}
  },
  methods: {
  	addPhone () {
				var add = new Object();
    		Vue.set(add, this.newPhoneKey, this.newPhoneValue);
        this.phones.phone.push(add);
        this.newPhoneKey = '';
        this.newPhoneValue = '';
    },
    deletePhone: function(index) {
      this.phones.phone.splice(index, 1);
    },
    modifyPhone: function(index, key, value) {
    	var modified = new Object();
    	Vue.set(modified, key, value);
    	this.phones.phone.splice(index, 1, modified)
    }
  }
})