Saya sedang membuat fitur update data pada modul CRUD wit vue Js. tapi selalu error saat mencoba menyimpan hasil perubahan(save changes)

Abdul Rauf

1 Jawaban

25 Dilihat

1 tahun yang lalu

@extends('layouts.admin')
@section('header','Book')

@section('content')
<div id="controller">
    <div class="row">
      <div class="col-md-5 offset-md-3">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
           <span class="input-group-text"><i class="fas fa-search"></i></span>
          </div>
         <input type= "text" class="form-control" autocomplete="off" placeholder="Search from title" v-model="search">
        </div>
      </div>

        <div class="col-md-2">
            <button class="btn btn-primary" @click="addData()">Create New Book</button>
        </div>
    </div>

    <hr>

    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12" v-for="book in filteredlist">
        <div class="info-box" v-on:click="editData(book)">
          <div class="info-box-content">
           <span class="info-box-text h3">@{{ book.title }} ( @{{ book.qty }} )</span>
           <span class="info-box-number">Rp. @{{ numberWithSpaces(book.price) }} ,-<small></small></span>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="post" :action="actionUrl" autocomplete="off">
                    <div class="modal-header">
                        <h4 class="modal-title">Book</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @csrf

                        <input type="hidden" name="_method" value="PUT" v-if="editStatus" @submit="submitForm($event, books.id)">

                        <div class="form-group">
                            <label>ISBN</label>
                            <input type="number" class="form-control" name="isbn" required="" :value="book.isbn">
                        </div>

                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" class="form-control" name="title" required="" :value="book.title">
                        </div>

                        <div class="form-group">
                            <label>year</label>
                            <input type="number" class="form-control" name="year" required="" :value="book.year">
                        </div>

                        <div class="form-group">
                            <label>Publisher</label>
                            <select name="publisher_id" class="form-control">
                                @foreach($publishers as $publisher)
                                <option :selected="book.publisher_id == {{ $publisher->id }}" value="{{ $publisher->id }}">{{ $publisher->name }}</option>
                                @endforeach
                            </select>
                            
                        </div>

                        <div class="form-group">
                            <label>Author</label>
                            <select name="author_id" class="form-control">
                                @foreach($authors as $author)
                                <option :selected="book.author_id == {{ $author->id }}" value="{{ $author->id }}">{{ $author->name }}</option>
                                @endforeach
                            </select>
                            
                        </div>

                        <div class="form-group">
                            <label>Katalog</label>
                            <select name="catalog_id" class="form-control">
                                @foreach($catalogs as $catalog)
                                <option :selected="book.catalog_id == {{ $catalog->id }}" value="{{ $catalog->id }}">{{ $catalog->name }}</option>
                                @endforeach
                            </select>
                            
                        </div>

                        <div class="form-group">
                            <label>Qty Stock</label>
                            <input type="number" class="form-control" name="qty" required="" :value="book.qty">
                        </div>

                        <div class="form-group">
                            <label>Harga Pinjam</label>
                            <input type="number" class="form-control" name="price" required="" :value="book.price">
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default bg-danger" v-if="editStatus" v-on:click="deleteData(book.id)">Delete</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

</div>
@endsection

@section('js')
<script type="text/javascript">
    var actionUrl = '{{ url('books') }}';
    var apiUrl = '{{ url('api/books') }}';
    
    var app = new Vue({
        el : '#controller',
        data : {
            books: [],
            search: '',
            book: {},
            editStatus: false
        },
        mounted: function () {
            this.get_books();
        },
        methods: {
            get_books() {
                const _this = this;
                $.ajax({
                    url: apiUrl,
                    method: 'GET',
                    success: function (data) {
                    _this.books = JSON.parse(data);
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            },
            addData() {
                this.book = {};
                this.editStatus = false;
                $('#modal-default').modal(); 
            },
            editData(book) {
                this.book = book;
                this.editStatus = true;
                $('#modal-default').modal(); 
                
            },
            deleteData(id) {
               console.log(id);
            },
            numberWithSpaces(x) {
                return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
            },
            submitForm(event, id) {
                event.preventDefault();
                const _this = this;
                var actionUrl = !this.editStatus ? this.actionUrl : this.actionUrl + '/' + book.id;
                axios.post(actionUrl, new FormData($(event.target)[0])).then(response => {
                  $('#modal-default').modal('hide');
                  _this.table.ajax.reload();
                });
            } 
        },
        computed: {
            filteredlist () {
                return this.books.filter(book => {
                    return book.title.toLowerCase().includes(this.search.toLowerCase())
                })
            }
        }
    });
</script>
@endsection

1 Jawaban

Sort

coba lihat output "php artisan route:list" ada method put url api/books tidak kak ? kalau tidak ada, coba "php artisan cache:clear"

admin

1 tahun yang lalu

ngga ada kak, ada method PUT nya tpi bukan url api/books ini hasil nya :

PS C:\xampp\htdocs\laravel-vue\tugas-laravel-abdul> php artisan route:list

GET|HEAD / ..................................................................................................

GET|HEAD _debugbar/assets/javascript ............ debugbar.assets.js › Barryvdh\Debugbar › AssetController@js

GET|HEAD _debugbar/assets/stylesheets ......... debugbar.assets.css › Barryvdh\Debugbar › AssetController@css

DELETE _debugbar/cache/{key}/{tags?} ... debugbar.cache.delete › Barryvdh\Debugbar › CacheController@delete

GET|HEAD _debugbar/clockwork/{id} .. debugbar.clockwork › Barryvdh\Debugbar › OpenHandlerController@clockwork

GET|HEAD _debugbar/open ............. debugbar.openhandler › Barryvdh\Debugbar › OpenHandlerController@handle

POST _ignition/execute-solution ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolutionContr…

GET|HEAD _ignition/health-check ....... ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckController

POST _ignition/update-config .... ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigController

GET|HEAD api/authors ................................................................... AuthorController@api

GET|HEAD api/books ....................................................................... BookController@api

GET|HEAD api/members ................................................................... MemberController@api

GET|HEAD api/publishers ............................................................. PublisherController@api

GET|HEAD api/user ...........................................................................................

GET|HEAD authors ..................................................... authors.index › AuthorController@index

POST authors ..................................................... authors.store › AuthorController@store

GET|HEAD authors/create ............................................ authors.create › AuthorController@create

GET|HEAD authors/{author} .............................................. authors.show › AuthorController@show

PUT|PATCH authors/{author} .......................................... authors.update › AuthorController@update

DELETE authors/{author} ........................................ authors.destroy › AuthorController@destroy

GET|HEAD authors/{author}/edit ......................................... authors.edit › AuthorController@edit

GET|HEAD books ........................................................... books.index › BookController@index

POST books ........................................................... books.store › BookController@store

GET|HEAD books/create .................................................. books.create › BookController@create

GET|HEAD books/{book} ...................................................... books.show › BookController@show

PUT|PATCH books/{book} .................................................. books.update › BookController@update

DELETE books/{book} ................................................ books.destroy › BookController@destroy

GET|HEAD books/{book}/edit ................................................. books.edit › BookController@edit

GET|HEAD catalogs .................................................. catalogs.index › CatalogController@index

POST catalogs .................................................. catalogs.store › CatalogController@store

GET|HEAD catalogs/create ......................................... catalogs.create › CatalogController@create

GET|HEAD catalogs/{catalog} .......................................... catalogs.show › CatalogController@show

PUT|PATCH catalogs/{catalog} ...................................... catalogs.update › CatalogController@update

DELETE catalogs/{catalog} .................................... catalogs.destroy › CatalogController@destroy

GET|HEAD catalogs/{catalog}/edit ..................................... catalogs.edit › CatalogController@edit

GET|HEAD home .......................................................................... HomeController@index

GET|HEAD login ................................................... login › Auth\LoginController@showLoginForm

POST login ................................................................... Auth\LoginController@login

POST logout ........................................................ logout › Auth\LoginController@logout

GET|HEAD members ..................................................... members.index › MemberController@index

POST members ..................................................... members.store › MemberController@store

GET|HEAD members/create ............................................ members.create › MemberController@create

GET|HEAD members/{member} .............................................. members.show › MemberController@show

PUT|PATCH members/{member} .......................................... members.update › MemberController@update

DELETE members/{member} ........................................ members.destroy › MemberController@destroy

GET|HEAD members/{member}/edit ......................................... members.edit › MemberController@edit

GET|HEAD password/confirm ................. password.confirm › Auth\ConfirmPasswordController@showConfirmForm

POST password/confirm ............................................ Auth\ConfirmPasswordController@confirm

POST password/email ................... password.email › Auth\ForgotPasswordController@sendResetLinkEmail

GET|HEAD password/reset ................ password.request › Auth\ForgotPasswordController@showLinkRequestForm

POST password/reset ................................ password.update › Auth\ResetPasswordController@reset

GET|HEAD password/reset/{token} ................. password.reset › Auth\ResetPasswordController@showResetForm

GET|HEAD publishers ............................................ publishers.index › PublisherController@index

POST publishers ............................................ publishers.store › PublisherController@store

GET|HEAD publishers/create ................................... publishers.create › PublisherController@create

GET|HEAD publishers/{publisher} .................................. publishers.show › PublisherController@show

PUT|PATCH publishers/{publisher} .............................. publishers.update › PublisherController@update

DELETE publishers/{publisher} ............................ publishers.destroy › PublisherController@destroy

GET|HEAD publishers/{publisher}/edit ............................. publishers.edit › PublisherController@edit

GET|HEAD register ................................... register › Auth\RegisterController@showRegistrationForm

POST register .......................................................... Auth\RegisterController@register

GET|HEAD sanctum/csrf-cookie .............. sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show

GET|HEAD transactions ........................................................... TransactionController@index

•

Abdul Rauf 1 tahun yang lalu

bagian ini di hapus

bagian ini

ganti jadi ini

•

admin 1 tahun yang lalu

@Abdul Rauf

Failed to load resource: the server responded with a status of 404 (Not Found)

user1-128x128.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)

user8-128x128.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)

user3-128x128.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)

vue.js:9099 Download the Vue Devtools extension for a better development experience:

https://github.com/vuejs/vue-devtools

vue.js:9108 You are running Vue in development mode.

Make sure to turn on production mode when deploying for production.

See more tips at https://vuejs.org/guide/deployment.html

3vue.js:634 [Vue warn]: Property or method "actionUrl" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

warn @ vue.js:634

vue.js:634 [Vue warn]: Error in v-on handler: "ReferenceError: book is not defined"

(found in <Root>)

warn @ vue.js:634

vue.js:1906 ReferenceError: book is not defined

at Vue.submitForm (books:493:92)

at submit (eval at createFunction (vue.js:11698:14), <anonymous>:3:1437)

at invokeWithErrorHandling (vue.js:1872:28)

at HTMLFormElement.invoker (vue.js:2197:16)

at original._wrapper (vue.js:7591:27)

logError @ vue.js:1906

vue.js:634 [Vue warn]: Error in v-on handler: "ReferenceError: book is not defined"

(found in <Root>)

warn @ vue.js:634

vue.js:1906 ReferenceError: book is not defined

at Vue.submitForm (books:493:92)

at submit (eval at createFunction (vue.js:11698:14), <anonymous>:3:1437)

at invokeWithErrorHandling (vue.js:1872:28)

at HTMLFormElement.invoker (vue.js:2197:16)

at original._wrapper (vue.js:7591:27)

logError @ vue.js:1906

errornya jdi gitu kak

•

Abdul Rauf 1 tahun yang lalu

Hots

Newest Question

• Masalh cara mulai kelas nya

4 bulan yang lalu • 0 Jawaban • 12 Dilihat
• mengenai tugas akhir / project akhir

4 bulan yang lalu • 0 Jawaban • 9 Dilihat
• Tugas Latihan Studi Kasus MySQL

5 bulan yang lalu • 0 Jawaban • 14 Dilihat
• Link PPT tidak dapat diakses?

6 bulan yang lalu • 0 Jawaban • 9 Dilihat
• cara pembuatan Requirements dan Test Plan

7 bulan yang lalu • 0 Jawaban • 8 Dilihat