Im trying to PUT some of atributes from array Zamestnanci to array archivovany, I tried almost everything and it seems to not work at all. I allways get HTTP error 415 or HTTP 400 because the atributes in archivovany are null.
<script>
import axios from 'axios';
import ZamestnanciService from "../ZamestnanciService";
export default {
name: 'Zamestnanci',
data() {
return {
zamestnanci: [{
id:"",
meno:"",
priezvisko:"",
pozicia:"",
}],
archivovany: [{
id: "",
meno: "",
priezvisko: "",
datumPrepustenia: new Date(),
poslednaPozicia: "",
}]
,
};
},
created(){
this.getZamestnanci();
},
methods: {
getZamestnanci(){
axios.get('https://localhost:49153/api/zamestnanci').then(response => {
this.zamestnanci = response.data;
console.log(response.data);})
}, //get
archivovat(id){
axios.post('https://localhost:49153/api/archivovany/',this.archivovany).then(res=>{
console.log(res);})
},
deleteZamestnanci(id){
axios.delete('https://localhost:49153/api/zamestnanci/'+id).then(response => {this.getZamestnanci();})
if(confirm("chcete archivovať zamestnanca ?")){
this.archivovat();
}
},//delete
}
}
</script>
I need to pass id, meno, priezvisko, pozicia to array archivovany and then PUT the data to another table, but nothing seems to work can anyone please help me ?
The data is from asp.net core API
Okay so I solved it my way, I don't know if its the best way but here is my solution.
i created one more object zamestnanec.
export default {
name: 'Zamestnanci',
data() {
return {
zamestnanci:"",
zamestnanec:"",
archivovany: {
meno: "",
priezvisko: "",
adresa:"",
datumNarodenia:"",
datumPrepustenia: new Date(),
pozicia: "",
plat: ""
}
I created one more axios.get function to load data to the object inside the function Archivovat(id) and there i saved the data from get function to zamestnanec and after that I have put the data to object where i needed.
archivovat(id){
axios.get('https://localhost:49153/api/zamestnanci/'+id).then(response => {
this.zamestnanec = response.data;
this.archivovany.meno=this.zamestnanec.meno;
this.archivovany.priezvisko=this.zamestnanec.priezvisko;
this.archivovany.adresa=this.zamestnanec.adresa;
this.archivovany.datumNarodenia=this.zamestnanec.datumNarodenia;
this.archivovany.pozicia=this.zamestnanec.pozicia;
this.archivovany.plat=this.zamestnanec.plat;
console.log(response.data);
axios.post('https://localhost:49153/api/archivovany/',this.archivovany).then(res=>{
console.log(res);})})
},
I'ts really messy code but it solved my problem.
Related
-- Initial setup --
Create component
const ButtonAgGrid= {
template: "<button>{{ displayValue }}</button>",
setup(props) {
const displayValue = 'TEST-TEXT';
return {
displayValue,
};
},
};
Register component
<AgGridVue
:components="{
ButtonAgGrid
}"
...
/>
Pass data
const columnDefs = [
{
field: "name"
},
{
field: "button",
cellRenderer: "ButtonAgGrid",
}
]
const rowData = computed(() => {
return {
name: testReactiveValue.value ? 'test', 'test2'
}
})
And when computed "rowData" updated, agGrid send error:
Error: AG Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, e.g. instead of api.redrawRows(), call setTimeout(function() { api.redrawRows(); }, 0). To see what part of your code that caused the refresh check this stacktrace.
But if we remove cellRenderer: "ButtonAgGrid", all work good
My solution is to manually update rowData.
watchEffect(() => {
gridApi.value?.setRowData(props.rowData);
});
This one works well, but I wish it was originally
Context:
I have a reports application that contains a report editor. This Report Editor is used to edit the contents of the report, such as the title, the criteria for filtering the results, the time range of results, etc..
The Problem:
There is something wrong with the way I have used Vuex/Vuejs in my components I believe. My store contains getters for each aspect of this report editor. Like this:
const getters = {
activeReportTitle: state => {
return state.activeReport.title;
},
activeReportID: state => {
return state.activeReport.id;
},
timeframe: state => {
return state.activeReport.timeframe;
},
includePreviousData: state => {
return state.activeReport.includePreviousData;
},
reportCriteria: state => {
return state.activeReport.reportCriteria;
},
emailableList: state => {
return state.activeReport.emailableList;
},
dataPoints: state => {
return state.activeReport.configuration?.dataPoints;
},
...
Each getter is used in a separate component. This component uses the getter only to initialize the local data, and uses actions to modify the state. The way I have done this is by adding a local data property and a watcher on the getter that changes the local data property. The component is using the local data property and that data property is sent to the action and the getter is updated.
ReportSearchCriteria.vue
...
data() {
return {
localReportCriteria: [],
currentCriteria: "",
};
},
watch: {
reportCriteria: {
immediate: true,
handler(val) {
this.localReportCriteria = [...val];
}
}
},
computed:{
...reportStore.mapGetters(['reportCriteria'])
},
methods: {
...reportStore.mapActions(["updateReportCriteria"]),
addSearchCriteria() {
if (this.currentCriteria) {
this.localReportCriteria.push(this.currentCriteria);
this.updateReportCqriteria(this.localReportCriteria);
}
this.currentCriteria = "";
this.$refs['reportCriteriaField'].reset();
},
...
The hierarchy of the components is set up like this
Reports.Vue
GraphEditor.vue
ReportSearchCriteria.vue
Could you clarify what the problem is? Does the 'reportCriteria' not get updated when it's supposed to? How does the function 'updatedReportCriteria' look like? You use mutations to update a state in the store. Also, you have a typo when you're calling the action.
While using Firestore, vuefire, vue-tables-2, I stuck getting document's id.
My data structure is as below.
Here is my code.
<v-client-table :columns="columns" :data="devices" :options="options" :theme="theme" id="dataTable">
import { ClientTable, Event } from 'vue-tables-2'
import { firebase, db } from '../../firebase-configured'
export default {
name: 'Devices',
components: {
ClientTable,
Event
},
data: function() {
return {
devices: [],
columns: ['model', 'id', 'scanTime', 'isStolen'],
options: {
headings: {
model: 'Model',
id: 'Serial No',
scanTime: 'Scan Time',
isStolen: 'Stolen YN'
},
templates: {
id: function(h, row, index) {
return index + ':' + row.id // <<- row.id is undefined
},
isStolen: (h, row, index) => {
return row.isStolen ? 'Y': ''
}
},
pagination: {
chunk: 5,
edge: false,
nav: 'scroll'
}
},
useVuex: false,
theme: 'bootstrap4',
template: 'default'
}
},
firestore: {
devices: db.collection('devices')
},
};
My expectation is devices should id property as vuefire docs.
But array this.devices didn't have id field even if I check it exist it console.
Basically, every document already has id attribute, but it's non-enumerable
Any document bound by Vuexfire will retain it's id in the database as
a non-enumerable, read-only property. This makes it easier to write
changes and allows you to only copy the data using the spread operator
or Object.assign.
You can access id directly using device.id. But when passing to vue-tables-2、devices is copied and lost id non-enumerable attribute.
I think you can workaround using computed property
computed: {
devicesWithId() {
if (!this.devices) {
return []
}
return this.devices.map(device => {
...device,
id: device.id
})
}
}
Then, please try using devicesWithId in vue-tables-2 instead.
I am using vue-i18n in a vue project. And I found it really confusing when using some data in vue data with i18n. Then if I change locale, that data is not reactive. I tried to return that data from another computed data but anyways it is not reactive because i18n is written in data. *My situation - * I want to show table with dropdown(list of columns with checkbox) above it. When user checks a column it will be showed in table if unchecks it won't. It is working fine until I change locale. After changing locale table columns is not translated but dropdown items is reactively translated and my code won't work anymore. Here is some code to explain better: In my myTable.vue component I use bootstrap-vue table -
template in myTable.vue
<vs-dropdown vs-custom-content vs-trigger-click>
<b-link href.prevent class="card-header-action btn-setting" style="font-size: 1.4em">
<i class="fa fa-th"></i>
</b-link>
<vs-dropdown-menu class="columns-dropdown">
<visible-columns :default-fields="columns" #result="columnListener"></visible-columns>
</vs-dropdown-menu>
</vs-dropdown>
<b-table class="generalTableClass table-responsive" :fields="computedFieldsForTable">custom content goes here</b-table>
script in myTable.vue
data(){
return {
fieldsForTable: [];
}
},
computed: {
computedFieldsForTable () {
return this.fieldsForTable;
},
columns() {
return [
{
key: 'id',
label: this.$t('id'),,
visible: true,
changeable: true
},
{
key: 'fullName',
label: this.$t('full-name'),,
visible: true,
changeable: true
},
{
key: 'email',
label: this.$t('email'),,
visible: true,
changeable: true
}
]
}
},
mounted () {
this.fieldsForTable = this.filterColumns(this.columns);
},
methods: {
filterColumns(columns = []) {
return columns.filter(column => {
if (column.visible) {
return column
}
})
},
columnListener ($event) {
this.fieldsForTable = this.filterColumns($event)
}
}
Can someone give me some advice for this situation ?
*EDIT AFTER SOME DEBUGGING: I think when filtering columns(in computed) and returning it for fieldsForTable inside filterColumns(columns) method, it actually returning array(of objects) with label='Label Name' not label=this.$t('labelName'). So after filtering the new array has nothing to do with vue-i18n. My last chance is reloading the page when locale changes.
Trying modify computedFieldsForTable as follows. You need to reference this.columns in computedFieldsForTable, so that Vue can detect the change of labels in this.columns.
computedFieldsForTable () {
return this.filterColumns(this.columns);
},
EDITED: put your this.columns in data. Then
columnListener ($event) {
this.columns = $event;
}
I hope i didn't misunderstand what you mean.
EDITED (again):
Maybe this is the last chance that I think it can work. Put columns in computed() still and remove computedFieldsForTable. Finally, just leave fieldsForTable and bind it on fields of <b-table>.
watch: {
columns(val) {
this.fieldsForTable = this.filterColumns(val)
}
},
method: {
columnListener ($event) {
this.fieldsForTable = this.filterColumns($event)
}
}
However, I think it is better and easier to reload page whenever local change. Especially when your columns have a more complex data structure.
import gql from 'graphql-tag'
export default {
name: 'patient-list',
data () {
return {
patients: [],
patientsColumns: [
{ name: 'id', label: 'number', field: 'patient_number' },
{ name: 'last', label: 'last name', field: row => row.user.last },
{ name: 'first', label: 'first name', field: row => row.user.first }
]
}
},
apollo: {
patients: {
query: gql`
{
patients {
patient_number
user {
first
last
}
}
}
`
}
}
}
<div>
{{patients[0]}}
<q-table
:data="patients"
:columns="patientsColumns"
row-key="name"
></q-table>
</div>
I have problem with printing datas in table by apollo... and i can't figure out what is wrong with this :)
the main problem with my console is
( TypeError: Cannot add property __index, object is not extensible )
I created sample static data and was ok, but when I what use datas passed from apollo by graphql query datatable show "no data available"
If someone give me small advice I will be grateful :)
Error in render: "TypeError: Cannot add property __index, object is
not extensible"
Datatable and sample record passed from Graphql by apollo
this is my code
Printed first object from apollo
ERRORS FROM CONSOLE