html – Select dropdown location did not affect material column table dropdown-ThrowExceptions

Exception or error:

Im pretty new to vue and kendo UI, I have this code

Pekerjaannew.vue

    <template>
    <div class="container-fluid">
        <div class="row bg-title">
            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <h4 class="page-title">Create Pekerjaan</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="white-box">
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="state-success">Kategori Pekerjaan</label>
                                <div class="col-md-6">
                                    <select class="form-control" v-model="kategori_pekerjaan" @change="change()">
                                        <option value="" selected disabled>Choose</option>
                                        <option v-for="kp in kategori_pekerjaans" :value="kp.id" :key="kp.id">{{ kp.name }}</option>
                                    </select>
                                </div>    
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="state-success"> Lokasi</label>
                                <div class="col-md-6">
                                    <select class="form-control" v-model="location" @change="changeloca()">
                                        <option value="" selected disabled>Choose</option>
                                        <option v-for="loca in locations" :value="loca.id" :key="loca.id">{{ loca.name }}</option>
                                    </select>
                                </div>    
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="form-group">

                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="form-group">

                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="state-success">Nama Pekerjaan</label>
                                <div class="col-md-6">
                                    <input type="text" id="ppekerjaan" name="sub_kategori" class="form-control" >
                                </div>   
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="state-success">Satuan</label>
                                <div class="col-md-6">
                                    <select class="form-control" v-model="satuan" @change="changeloca()">
                                        <option value="" selected disabled>Choose</option>
                                        <option v-for="satu in satuans" :value="satu.id" :key="satu.id">{{ satu.name }}</option>
                                    </select>
                                </div>   
                            </div>
                        </div>
                    </div>
                    <hr>
                    <Grid ref="grid"
                        :style="{height: '440px'}"
                        :data-items="gridData"
                        :edit-field="'inEdit'"
                        @edit="edit"
                        @remove="remove"
                        @save="save"
                        @cancel="cancel"
                        @itemchange="itemChange"
                        :columns="columns">
                        <grid-toolbar>
                            <button title="Add new"
                                    class="k-button k-primary"
                                    @click='insert' >
                                Add new
                            </button>
                            <button v-if="hasItemsInEdit"
                                    title="Cancel current changes"
                                    class="k-button"
                                    @click="cancelChanges">
                                    Cancel current changes
                            </button>
                        </grid-toolbar>
                        <grid-norecords>
                            There is no data available custom
                        </grid-norecords>
                    </Grid>
                    <dropmaterial :loca="location"></dropmaterial>
                </div>
            </div>
        </div>
    </div>
    </template>
    <script>
import Vue from "vue";
import axios from 'axios';
import { Grid } from '@progress/kendo-vue-grid';
import CommandCell from './pekerjaan/CommandCell';
import DropDownCellMaterial from './pekerjaan/DropDownCellMaterial';

Vue.component("dropmaterial", DropDownCellMaterial);

export default {
    name: 'createpekerjaan',
    components: {
        'Grid': Grid,
        // 'GridToolbar':GridToolbar,
    },
    data: function () {
        return {
            location:0,
            locations:[],
            kategori_pekerjaan:0,
            kategori_pekerjaans:[],
            satuan:0,
            satuans:[],
            updatedData: [],
            editID: null,
            group: [ { field: 'UnitsInStock' } ],
            expandedItems: [],
            columns: [
                { field: 'material', title: 'Material',  width: '150px', cell: DropDownCellMaterial },
                { field: 'UnitsInStock', title: 'Index', editor: 'numeric' },
                { field: 'price', title: 'Harga Upah', editor: 'numeric', cell: this.cellFunction },
                { field: 'price', title: 'Total Upah', editor: 'numeric', cell: this.cellFunction },
                { field: 'price', title: 'Harga Bahan', editor: 'numeric', cell: this.cellFunction },
                { field: 'price', title: 'Total Bahan', editor: 'numeric', cell: this.cellFunction },
                { cell: CommandCell, title:'Aksi', width: '300px' }
            ],
            gridData: []
        };
    },
    computed: {
        hasItemsInEdit() {
            return this.gridData.filter(p => p.inEdit).length > 0;
        }
    },
    mounted () {
        this.load();
        this.updatedData = JSON.parse(JSON.stringify(this.gridData));
    },
    methods: {
        load(){
            axios.get('https://localhost:44359/api/lokasi').then(res => {
            this.locations = res.data 
            })

            axios.get('https://localhost:44359/api/satuan').then(res => {
            this.satuans = res.data 
            })

            axios.get('https://localhost:44359/api/kategori_pekerjaan').then(res => {
            this.kategori_pekerjaans = res.data 
            })
        },
        changeloca()
        {
            this.load()
        },
        cellFunction: function (h, tdElement , props ) {
            return h('td', ['tambah ' + props.dataItem.price]);
        },
        itemChange: function (e) {
            if (e.dataItem.ProductID) {
              let item = this.gridData.find(p => p.ProductID === e.dataItem.ProductID);
              Vue.set(item, e.field, e.value);
            } else {
              Vue.set(e.dataItem, e.field, e.value);
            }
        },
        insert() {
            const dataItem = { inEdit: true, Discontinued: false };
            const newproducts = this.gridData.slice();
            newproducts.unshift(dataItem);
            Vue.set(this, "gridData", newproducts);
        },
        edit: function (e) {
            Vue.set(e.dataItem, 'inEdit', true);
        },
        save: function(e) {
            Vue.set(e.dataItem, 'inEdit', undefined);
            let item = this.gridData.find(p => p.ProductID === e.dataItem.ProductID);
            let index = this.gridData.findIndex(p => p.ProductID === item.ProductID);

            Vue.set(this.gridData, index, this.update(this.gridData.slice(), item));
            Vue.set(this.gridData[index], 'inEdit', undefined);
            this.updatedData = JSON.parse(JSON.stringify(this.gridData));
        },
        update(data, item, remove) {
            let updated;
            let index = data.findIndex(p => item.ProductID && p.ProductID === item.ProductID);
            if (index >= 0) {
                updated = Object.assign({}, item);
                data[index] = updated;
            } else {
                let id = 1;
                data.forEach(p => { if (p.ProductID) { id = Math.max(p.ProductID + 1, id); } });
                updated = Object.assign({}, item, { ProductID: id });
                data.unshift(updated);
                index = 0;
            }

            if (remove) {
                data = data.splice(index, 1);
            }
            return data[index];
        },
        cancel(e) {
            if (e.dataItem.ProductID) {
                let originalItem = this.updatedData.find(p => p.ProductID === e.dataItem.ProductID);
                let index = this.updatedData.findIndex(p => p.ProductID === originalItem.ProductID);

                Vue.set(originalItem, 'inEdit', undefined);
                Vue.set(this.gridData, index, originalItem);
            } else {
                this.update(this.gridData, e.dataItem, true);
            }
        },
        remove(e) {
            e.dataItem.inEdit = undefined;
            this.update(this.gridData, e.dataItem, true);
            this.update(this.updatedData, e.dataItem, true);
            this.gridData = this.gridData.slice();
        },
        cancelChanges () {
             let editedItems = this.updatedData.filter(p => p.inEdit === true);
             if(editedItems.length){
                editedItems.forEach(
                    item => {
                       Vue.set(item, 'inEdit', undefined);
                     });
             }
            Vue.set(this, 'gridData', this.updatedData.slice());
        }
    }
}
    </script>

And here is DropdownCellMaterial.vue

    <template>
    <td v-if="!dataItem.inEdit" :class="className">{{ dataItem.area.name }}</td>
    <td v-else>
         <dropdownlist :data-items='gridData' :data-item-key="'id'" :text-field="'name'" v-model="value" @change="change"></dropdownlist>
    </td>
</template>
<script>
import axios from 'axios';
import { DropDownList } from '@progress/kendo-vue-dropdowns';


// console.log(dataItem.location.id);
export default {
    name: "DropDownCellMaterial",
    components: {
    'dropdownlist': DropDownList
    },
    props: {
        field: String,
        dataItem: Object,
        loca: Number,
        location: String,
        format: String,
        className: String,
        columnIndex: Number,
        columnsCount: Number,
        rowType: String,
        level: Number,
        expanded: Boolean,
        editor: String
    },
    data: function () {
        return {
            gridData: [],
            value: {},
            locat: 0
        }
    },
    watch:
    {
        loca: function(newVal)
        {
            this.locat = newVal
            axios.get('https://localhost:44359/api/material?location='+newVal).then(res => {
                this.gridData = res.data
                console.log(this.locat);
            })
        }
    },
    mounted() {
        console.log(this.locat);
    },
    methods: {
        // load(){
        //     axios.get('https://localhost:44359/api/material?location=1002').then(res => {
        //         this.gridData = res.data
        //     })
        // },
        change(e) {
            this.$emit('change', e, e.target.value);
        }
    }
}
    </script>

When i change location, the material in the table column should have changed according to the location.

This “axios.get(‘https://localhost:44359/api/material?location=‘+newVal)”, this var “newVal” should have change when the location in select option changed, it should give an ID location of the location dropdown then use it to show material data from that location in dropdown input but instead it did not show anything.

Can anyone tell me how to fix this ?

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *