Как выполнить запрос на удаление одного элемента за раз, используя Axios? - PullRequest
Новая
       24

Как выполнить запрос на удаление одного элемента за раз, используя Axios?

0 голосов
/ 06 мая 2018

Итак, я создаю базовое приложение со списком дел, используя API списка дел, и у меня возникают проблемы с выяснением, как удалить одно дело в тот момент, когда пользователь нажимает кнопку удаления. Я использую идентификатор #, который создается для новой задачи.

Я думал, что мой текущий код будет работать, но ничего не происходит, когда я нажимаю кнопку удаления.

Любое понимание того, что я делаю неправильно?

Вот весь мой JavaScript, но у меня возникли проблемы с последним addEventListener внизу кода: 

function Todo(title, description, price){
    this.title = title;
    this.description = description;
    this.price = price;
}

document.todo.addEventListener("submit", function(e){
    e.preventDefault();
    var titleForm = document.todo.title.value;
    var descriptionForm = document.todo.description.value;
    var priceForm = document.todo.price.value;
    var newTodo = new Todo(titleForm, descriptionForm, priceForm);

    axios.post("https://api.todo.io/name/todo", newTodo).then(function(response){
    console.log(response.data);
})
})

axios.get("https://api.todo.io/name/todo").then(function(response){
    for(var i = 0; i < response.data.length; i++){
        var h1 = document.createElement("h1");
        var h3 = document.createElement("h3");
        var h3Price = document.createElement("h3");
        var div = document.createElement("div");
        var delButton = document.createElement("button");

        var displaytitle = document.createTextNode(`Title: ${response.data[i].title}`);
        var displayDescription = document.createTextNode(`Description: ${response.data[i].description}`);
        var displayPrice = document.createTextNode(`Price: ${response.data[i].price}`);
        var displayButton = document.createTextNode("Delete");

        h1.appendChild(displaytitle);
        h3.appendChild(displayDescription);
        h3Price.appendChild(displayPrice);
        delButton.appendChild(displayButton);

        div.appendChild(h1);
        div.appendChild(h3);
        div.appendChild(h3Price);
        div.appendChild(delButton);


        document.body.appendChild(div);

           delButton.addEventListener("submit", function(e){
               e.preventDefault();
               axios.delete(`https://api.todo.io/name/todo/${response.data[i]._id}`).then(function(response){
                console.log("Todo Deleted!");
            })
           })  
        }
    console.log(response.data);
});

1 Ответ

0 голосов
/ 06 мая 2018

С документы для события 'submit':

Обратите внимание, что отправляется только для элемента формы, а не для кнопки или ввода. (Формы представлены, а не кнопки.)

Что касается проблемы с областью видимости, если вы извлекаете тело вашего цикла for как функцию: 

function addTodo({ _id, description, price, title }) {
    const h1 = document.createElement("h1");
    const displaytitle = document.createTextNode(`Title: ${title}`);
    h1.appendChild(displaytitle);

    const h3 = document.createElement("h3");
    const displayDescription = document.createTextNode(`Description: ${description}`);
    h3.appendChild(displayDescription);

    const h3Price = document.createElement("h3");
    const displayPrice = document.createTextNode(`Price: ${price}`);
    h3Price.appendChild(displayPrice);

    const delButton = document.createElement("button");
    const displayButton = document.createTextNode("Delete");
    delButton.appendChild(displayButton);
    delButton.addEventListener("click", function(e) {
        e.preventDefault();

        axios
          .delete(`https://api.todo.io/name/todo/${_id}`)
          .then(function(response) {
            console.log("Todo Deleted!");
          });
    });

    const div = document.createElement("div");
    div.appendChild(h1);
    div.appendChild(h3);
    div.appendChild(h3Price);
    div.appendChild(delButton);

    document.body.appendChild(div);
}

axios.get("https://api.todo.io/name/todo").then(function(response) {
    for (var i = 0; i < response.data.length; i++) {
        addTodo(response.data[i]);
    }
    console.log(response.data);
});
...