vikkyshostak
@vikkyshostak
< This head full of dreams.

Vue.js resource: почему не работает this.$http.delete()?

Доброго времени!

Делаю форму редактирования для блога, где есть кнопка удаления поста (Laravel 5.3). Возникло желание сделать красивый диалог при удалении – alert() с подтверждением и ajax (использую SweetAlert). Покурил мануалы и понял, что в этом может помочь расширение для Vue.js – vue-resource.

Делаю вот так в шаблоне:

<a href="#" 
  v-on:click="deleteArticle('{{ url('/articles/' . $article->id . '/delete') }}')">Удалить</a>

И далее в app.js:

var article_form = new Vue({
  el: '#article_form',
  ...
  ...
  methods: {
    deleteArticle: function (url) {
      swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
      }, function () {
        this.$http.delete(url, function () {
          swal("Deleted!", "Your imaginary file has been deleted.", "success");
        });
      });
    }
  }
});

Но при нажатии на кнопку подтверждения удаления – возникает вот такая ошибка:

TypeError: undefined is not an object (evaluating 'this.$http["delete"]')

В чём тут может быть дело?
  • Вопрос задан
  • 704 просмотра
Решения вопроса 1
erniesto77
@erniesto77
oop, rb, py, php, js
возможно надо как то так
deleteArticle: function (url) {
      let self = this;
      swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
      }, function () {
        self.$http.delete(url, function () {
          swal("Deleted!", "Your imaginary file has been deleted.", "success");
        });
      });
    }


UPD:
чтобы сформировать url для удаления статьи можно попробовать сделать так
blade
<a href="#" 
  v-on:click="deleteArticle()">Удалить</a>


layouts/app.blade.php
window.Laravel = <?= json_encode([
     'base_url' => url(),
     'article' => isset($article) ? $article->toArray() : null,
]); ?>


app.js
var article_form = new Vue({
		el: '#article_form',
		data: {
			delete_url: window.Laravel.base_url + '/article/' + window.Laravel.article.id + '/delete'
		},
		methods: {
			deleteArticle: function () {
				var self = this;

				swal({
					title: "Are you sure?",
					text: "You will not be able to recover this imaginary file!",
					type: "warning",
					showCancelButton: true,
					confirmButtonColor: "#DD6B55",
					confirmButtonText: "Yes, delete it!",
					closeOnConfirm: false
				}, function () {
					self.$http.delete(self.delete_url, function () {
						swal("Deleted!", "Your imaginary file has been deleted.", "success");
					});
				});
			}
		}
	});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы