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>{{arrayOfPhones}}</p>              
     <ul>

      <li v-for="phone in arrayOfPhones">
        <p v-for="(value, key) in phone">
          {{ arrayOfPhones.indexOf(phone) }}
          <input type="text" v-model="key" />
          <input type="text" v-model="value" />
          <button @click="deletePhone(arrayOfPhones.indexOf(phone))">remove</button>
          <button @click="modifyPhone(arrayOfPhones.indexOf(phone), 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"
                }
            ]
		}
  },
  computed: {
  	arrayOfPhones () {
    	return this.phones.phone
    }
  },
  methods: {
  	addPhone () {
				var add = new Object();
    		Vue.set(add, this.newPhoneKey, this.newPhoneValue);
        this.phones.phone.push(add)
    },
    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)
    }
  }
})