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

Question

[Vic Shóstak]

Делаю форму редактирования для блога, где есть кнопка удаления поста (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"]')

В чём тут может быть дело?

Answer 1

[Ernest Faizullin]

возможно надо как то так

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");
					});
				});
			}
		}
	});

Comments

[Vic Shóstak]

Первый вариант возвращает такую же ошибку, а вот второй – уже интереснее: Failed to load resource: the server responded with a status of 405 (Method Not Allowed).

[Ernest Faizullin]

Vikky Shostak: а как у вас описан роут Route::delete( ... ) ?

[Vic Shóstak]

Ernest Faizullin: так и прописан: Rout::delete('/articles/{id}/delete', 'ArticleControllee@destroy');

[Ernest Faizullin]

Vikky Shostak: запрос на сервер отправляется, но возвращается 405 ошибка, значит url не соответствует шаблону '/articles/{id}/delete'

[Ernest Faizullin]

Vikky Shostak: console.log(url) посмотрите в консоли, какая строка в url

[Ernest Faizullin]

Vikky Shostak: скорее всего надо в html вместо {{ url('/articles/' . $article->id . '/delete') }} писать @{{ url('/articles/' . $article->id . '/delete') }} чтобы фигурные скобки интерпритировались с помощью Laravel, а на Vue

[Vic Shóstak]

Ernest Faizullin: так. Интересное кино получается :) console.log(url) не выдаёт ничего – значит просто не передаётся этот параметр. Заменил на @{{ url('/articles/' . $article->id . '/delete') }} – вообще скрипт не отрабатывает (оно и логично, я же в Blade шаблоне делаю, а не в обычном html). Может быть есть способы передать динамический параметр ID материала во Vue без Blade?

[Ernest Faizullin]

Vikky Shostak: добавил в ответе возможный вариант

[Ernest Faizullin]

Vikky Shostak: Если js не в самой вьюшке, то в layouts/app.blade.php есть глобальная переменная window.Laravel. Можно туда передать данные $article, при условии что isset($article), а так же передать base_url. Тогда в data нужно будет формировать ссылку для удаления так delete_url: base_url + '/article/' + window.Laravel.article.id + '/delete'

[Vic Shóstak]

Ernest Faizullin: всё, понял в чём дело было – контроллер на выходе должен был делать редирект на страницу /articles, поэтому и возникала непонятка у Vue, что вроде как метод DELETE, а посылаем в роут, где обычный GET. Убрал эту строчку и всё заработало.

Но вот тут ещё одна проблема вытекла: использую vue-router, и хочу, чтобы после нажатия на ОК (внутри self.$http.delete() соответственно) происходил редирект на ту же /articles. Пишу вот так: self.$router.go('/articles') – вылетает ошибка: "TypeError: undefined is not an object (evaluating 't.$router.go')" (переменная "t" – это после gulp --production). Как быть?

[Ernest Faizullin]

Vikky Shostak: какая версия vuejs ?

[Vic Shóstak]

Ernest Faizullin: Vue.js 1.0.28, vue-router 2.0.3

[Ernest Faizullin]

Vikky Shostak: попробуй так self.$route.router.go('/articles')

[Ernest Faizullin]

Vikky Shostak: или вот так self.$router.push('/articles')

[Vic Shóstak]

Ernest Faizullin: точно такую же ошибку показывает. Попробовал поменять версию vue-router на 0.7.13 – такая же петрушка :( так ещё тема в том, что обычный lacation.href() не работает в методах Vue..

[Ernest Faizullin]

Vikky Shostak: с таким не сталкивался, может лучше создать отдельный вопрос про редирект, наверняка кто то знает

[Vic Shóstak]

Ernest Faizullin: так и сделаю, спасибо за участие!