Удалить запись JSON в VUE

Question

У меня есть этот код

<script>
import './styling.scss'
export default {
  name: "app",
  data() {
    return {
      items: {books:[], authors:[]}
    };
  },

  created: function() {
    this.makeAjaxCall("books.json", "get").then(res => {
        this.items.books = res.books;
        return res;
    }),

    this.makeAjaxCall("authors.json", "get").then(res => {
        this.items.authors = res.authors;
        return res;
    })
  },

  },

  methods: {
    removeEntry:function(item) {
        this.$delete(this.items.books, item.name);
      },

    makeAjaxCall:function(url, methodType){
      var promiseObj = new Promise(function(resolve, reject){
          var xhr = new XMLHttpRequest();
          xhr.open(methodType, url, true);
          xhr.send();
          xhr.onreadystatechange = function(){
          if (xhr.readyState === 4){
            if (xhr.status === 200){
                //alert("xhr done ok");
                var response = xhr.responseText;
                var respJson = JSON.parse(response);
                resolve(respJson);
            } else {
                reject(xhr.status);
               //alert("xhr failed");
            }
          } else {
            //alert("xhr processing");
          }
      }
      //alert("request sent succesfully");
    });
    return promiseObj;
    }
  }
};
</script>

<template>
  <div id="app">
    {{items.authors}}
    <table class="booksTable">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Genre</th>
          <th>Image</th>
          <th>Availability</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items.books" :key="item.name">
              <td>{{item.name}}</td>
              <td>{{item.author}}</td>
              <td>{{item.genre}}</td>
              <td><img id="imageBook" :src="item.imageUrl"></td>
              <td v-if="item.availability">Available</td>
              <td v-else>Unavailable</td>
              <td>
                <button class="btn add">Add</button>
                <button class="btn edit">Edit</button>
                <button class="btn delete" v-on:click="removeEntry(item)">Delete</button>
              </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

, и мой JSON выглядит так

    "books": [
            {
                "name": "Lord of the rings",
                "author": 1,
                "year": 1937,
                "genre": 3,
                "imageUrl": "https://cdn.lifehack.org/wp-content/uploads/2015/03/9780618640157_custom-s6-c30.jpg",
                "availability": true
            },
            {
                "name": "To kill a mockingbird",
                "author": 2,
                "year": 1960,
                "genre": 1,
                "imageUrl": "https://cdn.lifehack.org/wp-content/uploads/2015/03/50-anniversary-cover1.jpg",
                "availability": true
            },
            {
                "name": "Harry Potter and the Philosopher’s Stone",
                "author": 3,
                "year": 2006,
                "genre": 3,
                "imageUrl": "https://cdn.lifehack.org/wp-content/uploads/2015/03/harry_potter_and_the_Sorcerers_stone_adult_usa.jpg",
                "availability": true
            }
}

Я хочу иметь возможность удалить запись из JSON, когда я нажимаю накнопка удаления.Не уверен, как это сделать.Необязательно: я хотел бы добавить или изменить записи.Было бы неплохо обновить таблицу после удаления / добавления / редактирования записи. Но опять же, я понятия не имею, как.Любая идея, как это сделать в Vue?

Answer 1

Пожалуйста, обновите свой v-for, чтобы иметь индекс, отправьте его в функцию removeEntry при нажатии кнопки и обновите функцию removeEntry:

Шаблон:

<tr v-for="(item, index) in items.books" :key="item.name">
    ...
    <button class="btn delete" v-on:click="removeEntry(index)">Delete</button>
</tr>

Vue:

methods: {
    ...
    removeEntry:function(index) {
        this.$delete(this.items.books, index);
    }
}

$delete метод работает с Array + index согласно документации https://vuejs.org/v2/api/#Vue-delete. Надеюсь, это поможет.

РЕДАКТИРОВАТЬ :

Пожалуйста, попробуйте обновить makeAjaxCall функцию, подобную этой:

makeAjaxCall:function(url, methodType, data){ // new argument `data`
    var promiseObj = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.open(methodType, url, true);
        // send `data` is exists
        if (data) {
            xhr.send(data);
        } else {
            xhr.send();
        }
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4){
                if (xhr.status === 200){
                    //alert("xhr done ok");
                    var response = xhr.responseText;
                    var respJson = JSON.parse(response);
                    resolve(respJson);
                } else {
                    reject(xhr.status);
                    //alert("xhr failed");
                }
            } else {
                //alert("xhr processing");
            }
        }
        //alert("request sent succesfully");
    });
    return promiseObj;
}

Также, пожалуйста, не забудьте позвонить makeAjaxCall при удалении объекта из this.items.books и отправить обновленноеданные типа JSON.stringify(this.items.books).

РЕДАКТИРОВАТЬ :

Пожалуйста, обновите removeEntry метод:

removeEntry:function(index) {
    this.$delete(this.items.books, index)
    this.makeAjaxCall('books.json', 'post', JSON.stringify(this.items.books))
}