Item management is the most advanced example included in the Pro theme, because every item has a picture, belongs to a category and has multiple tags. To access this example click the "Examples(API)/Items " link in the left sidebar or add /items-list to the URL. Here you can manage the items. A list of items will appear once you start adding them (to access the add page click "Add item "). On the add page, besides the Name and Description fields (which are present in most of the CRUD examples) you can see a category dropdown, which contains the categories you added, a file input and a tag multi select. If you did not add any categories or tags, please go to the corresponding sections (categories, tags) and add some.
You can find the compoments for item functionality in src\views\examples-api\items folder.
The store used for item functionality is found in src\store\items.module.js
Item List Examples Copy
1 < tableid = " item-list" ref = " table" class = " table table-flush" > 2 < theadclass = " thead-light" > 3 < tr> 4 < thtitle = " name" class = " w-20" > </ th> 5 < thtitle = " category" class = " w-20" > </ th> 6 < thtitle = " picture" class = " w-20" > </ th> 7 < thtitle = " tags" class = " w-20" > </ th> 8 < thtitle = " created_at" class = " w-20" > </ th> 9 < thdata-sortable = " false" class = " text-end" > </ th> 10 </ tr> 11 </ thead> 12 < tbodyclass = " text-sm" > 13 </ tbody> 14 </ table> Add/Edit Examples Copy
1 < divclass = " card-body" > 2 < form> 3 < divclass = " mt-4 overflow-hidden" > 4 < div> 5 < material-avatar:img = " item.image" shadow = " regular" class = " img-fluid w-20 mt-7" 6 :fixedSize = " true" > 7 </ material-avatar> 8 </ div> 9 < divclass = " mt-1 mb-2" > 10 < material-buttonsize = " sm" type = " button" > 11 < labelfor = " imageInput" class = " mb-0 text-white small" > </ label> 12 < input id= "imageInput" @change. prevent= "onFileChange" type= "file"
13 style= "display: none;" >
14 </ material-button> 15 </ div> 16 </ div> 17
18 < divclass = " mt-5" > 19 < material-inputid = " name" label = " Name" v-model: value= " item.name" name = " name" 20 variant = " static" /> 21 < validation-error:errors = " apiValidationErrors.name" /> 22 </ div> 23
24 < divclass = " mt-5" > 25 < labelclass = " ms-0" > </ label> 26 < material-textareaid = " description" v-model: value= " item.description" 27 name = " description" /> 28 < validation-error:errors = " apiValidationErrors.description" /> 29 </ div> 30
31 < ! -- selectedCategory-- >
32 < divclass = " mt-5" > 33 < labelclass = " ms-0" > </ label> 34 < selectid = " choices-categories" class = " multisteps-form__select form-control" 35 name = " choices-categories" > 36 </ select> 37 < validation-error:errors = " apiValidationErrors.category" /> 38 </ div> 39
40 < ! -- selectedTag-- >
41 < divclass = " mt-5" > 42 < labelclass = " ms-0" > </ label> 43 < selectmultiple id = " choices-tags" class = " multisteps-form__select form-control" 44 name = " choices-tags" > 45 </ select> 46 < validation-error:errors = " apiValidationErrors.tags" /> 47 </ div> 48
49 < ! -- selectedStatus-- >
50 < divclass = " mt-5" > 51 < labelclass = " ms-0" > </ label> 52
53 < divclass = " form-check ps-0" > 54 < inputclass = " form-check-input" type = " radio" name = " radio" id = " published" 55 value = " published" v-model = " item.status" > 56 < labelclass = " form-check-label" for = " published" > </ label> 57 </ div> 58 < divclass = " form-check ps-0" > 59 < inputclass = " form-check-input" type = " radio" name = " radio" id = " draft" value = " draft" 60 v-model = " item.status" > 61 < labelclass = " form-check-label" for = " draft" > </ label> 62 </ div> 63 < divclass = " form-check ps-0" > 64 < inputclass = " form-check-input" type = " radio" name = " radio" id = " archive" 65 value = " archive" v-model = " item.status" > 66 < labelclass = " form-check-label" for = " archive" > </ label> 67 </ div> 68 < validation-error:errors = " apiValidationErrors.status" /> 69 </ div> 70
71 < ! -- showOnHomepage-- >
72 < divclass = " mt-5" > 73 < labelclass = " ms-0" > ? </ label> 74 < divclass = " form-check form-switch mb-4" > 75 < inputclass = " form-check-input" type = " checkbox" id = " isOnHomepage" 76 v-model = " item.is_on_homepage" > 77 </ div> 78 < validation-error:errors = " apiValidationErrors.is_on_homepage" /> 79 </ div> 80
81
82 < ! -- date-- >
83 < divclass = " mt-5" > 84 < labelclass = " ms-0" > </ label> 85 < flatPickrv-model = " item.date_at" class = " form-control" placeholder = " Select date" > 86 </ flatPickr> 87 < validation-error:errors = " apiValidationErrors.date_at" /> 88 </ div> 89
90 < divclass = " button-row d-flex mt-4" > 91 < material- button type= "button" color= "dark" variant= "gradient"
92 class = "ms-auto mb-0 js-btn-next" @click= "handleAdd" > Add Item</ material-button> 93 </ div> 94 </ form> 95 </ div> 96