mouse's avatar
Level 1

Vue Warn: method is not defined

Can anyone help me, what is wrong with my code? I am trying to do a CRUD with Laravel 5.4 + Vue 2 based by this website But I got this error on console log:

[Vue warn]: Property or method "categories" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

I saw similar problems on different websites, but I could not solve this. My blade php:

<div class="container"  id="manage-category">
  
        <!-- Category listing -->
        <div class="col-md-4">


            <table class="table">
            <thead>
                 <tr>
                    <th>
                        <button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#create-category">Új kategória</button>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="category in categories">
                    <td>@{{ category.cname }}</td>
                    <td>
                        <button class="btn btn-primary btn-xs" @click.prevent="editCategory(category)">
                            <span class="glyphicon glyphicon-edit"></span>
                        </button>
                        <button class="btn btn-warning btn-xs" @click.prevent="deleteCategory(category)">
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </td>
                </tr>
            </tbody>
            </table>

            <!--Pagination -->
            <nav>
                <ul class="pagination">
                    <li v-if="pagination.current_page > 1">
                        <a href="#" aria-label="Previous"
                           @click.prevent="changePage(pagination.current_page - 1)">
                            <span aria-hidden="true">«</span>
                        </a>
                    </li>
                    <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']">
                        <a href="#" @click.prevent="changePage(page)">@{{ page }}</a>
                    </li>
                    <li v-if="pagination.current_page < pagination.last_page">
                        <a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)">
                            <span aria-hidden="true">»</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- create category modal -->
            <div class="modal fade" id="create-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myModalLabel">Kategória létrehozása</h4>
                        </div>
                        <div class="modal-body">
                            <!-- Form-->
                            <form method="POST" enctype="multipart/form-data" v-on:submit.prevent="createCategory">
                                <div class="form-group">
                                    <label for="cname">Kategória neve:</label>
                                    <input type="text" name="cname" class="form-control" v-model="newCategory.cname" />
                                    <span v-if="formErrors['cname']" class="error text-danger">@{{ formErrors['cname'] }}</span>
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-success">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

             <!-- Edit Item Modal -->
            <div class="modal fade" id="edit-category" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-cname" id="myModalLabel">Edit Item</h4>
                        </div>
                        <div class="modal-body">
                            <!--Form edit -->
                            <form method="POST" enctype="multipart/form-data" v-on:submit.prevent="updateCategory(fillCategory.cid)">
                                <div class="form-group">
                                    <label for="cname">Kategória neve:</label>
                                    <input type="text" name="cname" class="form-control" v-model="fillCategory.cname" />
                                    <span v-if="formErrorsUpdate['cname']" class="error text-danger">@{{ formErrorsUpdate['cname'] }}</span>
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-success">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>

vuecodes.js:

new Vue({

  el: '#manage-category',

  data: {
    items: [],
    pagination: {
        total: 0, 
        per_page: 2,
        from: 1, 
        to: 0,
        current_page: 1
      },
    offset: 4,
    formErrors:{},
    formErrorsUpdate:{},
    newCategory : {'cname':''},
    fillCategory : {'cname':''}
  },

  computed: {
        isActived: function () {
            return this.pagination.current_page;
        },
        pagesNumber: function () {
            if (!this.pagination.to) {
                return [];
            }
            var from = this.pagination.current_page - this.offset;
            if (from < 1) {
                from = 1;
            }
            var to = from + (this.offset * 2);
            if (to >= this.pagination.last_page) {
                to = this.pagination.last_page;
            }
            var pagesArray = [];
            while (from <= to) {
                pagesArray.push(from);
                from++;
            }
            return pagesArray;
        }
    },

  ready : function(){
        this.getVueCategories(this.pagination.current_page);
  },

  methods : {

        getVueCategories: function(page){
          this.$http.get('/admin/create_products/category?page='+page).then((response) => {
            this.$set('categories', response.data.data.data);
            this.$set('pagination', response.data.pagination);
          });
        },

        createCategory: function(){
          var input = this.newItem;
          this.$http.post('/admin/create_products/category',input).then((response) => {
            this.changePage(this.pagination.current_page);
            this.newCategory = {'cname':''};
            $("#create-category").modal('hide');
            toastr.success('Category Created Successfully.', 'Success Alert', {timeOut: 5000});
          }, (response) => {
            this.formErrors = response.data;
        });
    },

      deleteCategory: function(category){
        this.$http.delete('/admin/create_products/category/'+category.cid).then((response) => {
            this.changePage(this.pagination.current_page);
            toastr.success('Item Deleted Successfully.', 'Success Alert', {timeOut: 5000});
        });
      },

      editCategory: function(category){
          this.fillCategory.cname = category.cname;
          this.fillCategory.cid = category.cid;
          $("#edit-category").modal('show');
      },

      updateCategory: function(cid){
        var input = this.fillCategory;
        this.$http.put('/admin/create_products/category/'+cid,input).then((response) => {
            this.changePage(this.pagination.current_page);
            this.fillCategory = {'cname':'','cid':''};
            $("#edit-category").modal('hide');
            toastr.success('Item Updated Successfully.', 'Success Alert', {timeOut: 5000});
          }, (response) => {
              this.formErrorsUpdate = response.data;
          });
      },

      changePage: function (page) {
          this.pagination.current_page = page;
          this.getVueCategories(page);
      }

  }

});

package.json:

 "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "vue-resource": "^1.0.3"
  }
0 likes
1 reply
topvillas's avatar

Read what the error says. It tells you what's wrong AND how to fix it.

Please or to participate in this conversation.