Pushing ajax data to vue component - ajax

Question

Having the following vue component
<employee-times :employees="{{$employees}}" :supplies="{{$supplies}}" :commits="{{$commits}}" :times="{{$times}}"></employee-times>
where I render the passed props
<template>
<div>
<select class="form-control input" v-model="currentYear" #change="filter()">
<option v-for="option in yearsOptions" v-bind:value="option">
{{ option }}
</option>
</select>
<tr v-for="employee,key in _employees" v-if="commits[key]">
<td>{{ key }}</td>
<td>{{ employee[0].first_name }}</td>
<td>{{ employee[0].last_name }}</td>
<td>{{ employee[0].nick }}</td>
<td>{{ employee[0].role }}</td>
<td>{{ employee[0].skill }}</td>
<td v-for="n in 12">
<div v-if="_commits[key][n]">{{ _commits[key][n].hours }}</div>
<div v-else> </div>
</td>
</tr>
</div>
</template>
than I try to filter the ajax data on change but the data will not update
here is the script what I'm trying, but from method function I'm not able to push the new data to the template
<script>
export default {
name: 'employee-times',
props: ['supplies', 'times', 'commits', 'employees'],
components: {
},
created() {
axios.get('/api/v1/roles', {
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
}).then(response => {
th
is.roles = response.data
}).catch(error => {
})
this._times = this.times;
this._commits = this.commits;
this._supplies = this.supplies;
this._employees = this.employees;
},
data() {
return {
count: 0,
yearsOptions: [],
_employees: {},
_supplies: {},
_times: {},
_commits: [],
currentYear: null,
currentStatus: 1,
currentPosition: 0,
statusOptions: [
{'id': '1',
'text': 'Active'
}, {'id': '0',
'text': 'Inactive'
}],
currentSkillset: 'all',
skillsetOptions: [
{'id': 'all',
'text': 'All'
}, {'l1': 'l1',
'text': 'L1'
}, {'l1': 'l2',
'text': 'L2'
}, {'l1': 'l3',
'text': 'L3'
}, {'l1': 'l4',
'text': 'L4'
}, {'l1': 'l5',
'text': 'L5'
}],
status: {},
roles: {},
skillsets: {}
};
},
mounted() {
this.currentYear = moment().format('Y')
var from = moment().subtract('4', 'years').format('Y')
var to = moment().add('2', 'years').format('Y')
while (from <= to) {
this.yearsOptions.push(from);
from++;
}
},
watch: {
'_employees': function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
}
},
methods: {
commit() {
},
clear() {
},
months() {
return moment.monthsShort()
},
filter() {
var data = {
year: this.currentYear,
status: this.currentStatus,
position: this.currentPosition,
//skill: currentSkillset
}
axios.post('/api/v1/supply/track-times', data, {
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
}).then(response => {
this._employees = {}
this.$set(this, '_employees', JSON.parse(response.data.employees))
this.$set(this,'_times', JSON.parse(response.data.times))
this.$set(this,'_supplies', JSON.parse(response.data.supplies))
this.$set(this, '_commits', JSON.parse(response.data.commits))
}).catch(error => {
})
}
},
};
</script>
What i missed in this case?

Answer 1

There's a problem with v-for and tables (ref 'v-for with 2 every time') that requires a template wrapper.
See example CodePen.
<div id='app'>
<table>
<template v-for="(employee, key) in employees">
<tr>
<td>{{ employee.first_name }}</td>
<td>{{ employee.last_name }}</td>
</tr>
</template>
<table>
</div>
It also appears that you do need to remove the underscores (try changing employee to _employee in the codepen).

Answer 2

Remove the "_" prefix from your data properties, then it should work. Vue uses underscores for internal stuff, so best avoid using it (see https://v2.vuejs.org/v2/api/#data)