我对vue和kendo UI很陌生，我有这段代码
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>
这是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>
当我更改位置时，表格列中的材料应该根据位置进行了更改。
此“ axios.get（'https://localhost:44359/api/material?location='+ newVal）”，此变量“ newVal”在选择选项中的位置发生更改时应该有所更改，它应该提供位置下拉列表的ID位置，然后使用它在下拉输入中显示该位置的物料数据，但不显示任何内容。
谁能告诉我该如何解决？