Level 46
Read what the error says. It tells you what's wrong AND how to fix it.
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"
}
Please or to participate in this conversation.