i have this data in json
{
name: "Contract information",
description: "Contract information",
created_at: "2021-08-23 09:40:42",
updated_at: "2021-08-23 09:41:07",
sender_id: 8,
chat: false,
videocall: false,
meeting: true
}
i want show in front end with vuejs the chat, videocall and meeting, but not true/false but the key (chat, videcall, meeting)
i tried to do this :
<b-button variant="outline-primary my-2 mx-1" style="cursor: default">
<strong> Contact:</strong>
{{getConsultancy.meeting) }}
</b-button>
but it show me the values true/false
how can i do show only the key?
I may have understood wrong but,
This code will give you real value keys but not the booleans
Object.keys(yourObject).filter(key => (typeof yourObject[key] != "boolean"))
Or If you just want to keys you can use
Object.keys(yourObject)
To get the Key you can do it with Object.keys(getConsultancy) or Object.keys(getConsultancy.meeting)
See Docs here:
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
Related
I want to show en edit icon next to value in Amount column. This is because the Amount column is actually editable.But to give that as a hint to user, i want to show some edit icon next to it. How to do that in aurelia slickgrid?
Or maybe there is a way to highlight a field on hover ?
I am using aurelia slickgrid and looking if there is some option in aurelia slickgrid itself.
Go to the aurelia slickgrid example link and click on the link of example's source code
When you open it, there is a method called defineGrids
/* Define grid Options and Columns */
defineGrids() {
this.columnDefinitions1 = [
...,
...,
...,
...,
...,
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
];
... rest of the code
}
The row with id effort-driven is where the icons are placed. On the other words, when you push a data collection(usually array of json object) to the table, values of the data objects with key name effort-driven are given to column with id effort-driven. Furthermore, for each passed value to the column, the method myCustomCheckmarkFormatter reformat it(for example 0 -> false or null -> not filled) and place it to the corresponding table's cell. look at the below method:
// create my custom Formatter with the Formatter type
const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
// you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
};
As you can see, when the method is called, it returns an icon such as <i class="fa fa-fire red" aria-hidden="true"></i> which is placed in the table's cell.
I added an edit icon next to Amount,
{
id: "Edit",
field: "edit",
excludeFromColumnPicker: true,
excludeFromExport: true,
excludeFromQuery: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
minWidth: 30,
maxWidth: 30,
formatter: Formatters.editIcon,
},
and used this custom format from ghiscoding comment:
const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
const isEditable = !!columnDef.editor;
value = (value === null || value === undefined) ? '' : value;
return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;
};
The result is as shown in the picture.
I am learning Vue with Element-UI these days, and I met a problem today early.
I saw my select's value has been changed already on the console, but on the page, it still displayed the old value. Why?
Here's my select tag's code:
<el-select v-model="ruleForm.emp" filterable placeholder="please select" #change="empChange">
<el-option v-for="item in emps" :key="item.id" :label="item.name" :value="item">
</el-option>
</el-select>
Here's the ruleForm's code:
ruleForm: {
emp: {
id: 1,
name: '',
address: ''
},
startDate: '',
position: '',
positionDetails: ''
}
Here's the empChange method:
empChange(emp){
this.ruleForm.emp = emp;
}
If you need something more to help you to figure out, please let me know and I'll update at once.
Any help will be appreciated!
Update: Vue's and Element-UI's version
"element-ui": "^2.4.5",
"vue": "^2.5.2"
Update: one emp of the data emps:
emp: {
id: 1723
name: "test"
address: "address_test"
}
At empChange method, change:
empChange(emp){
this.$set(this.ruleForm, 'emp', emp);
}
See reactivity
I will try and keep this as simple as possible.
We have a list of stations, each station has the ability to have up to 4 channels set.
Each station you can change any of the 4 stations.
There is also a summary table below the form that shows what was chosen.
Any change made to the station level updates on the summary table below, but any update to the channel does not. I am wondering if this is something to do with the answer here https://stackoverflow.com/a/42629584/9431766
What I am confused about is if the station display updates, but the channels do not update.
Here is a simplified version of the code
constructor() {
this.stations = [
{
name: 'Station 1',
channels: [null, null, null, null]
},
{
name: 'Station 2',
channels: [null, null, null, null]
},
{
name: 'Station 3',
channels: [null, null, null, null]
}
];
this.channels = [
{ id: 1, name: 'Channel 1' },
{ id: 2, name: 'Channel 2' },
{ id: 3, name: 'Channel 3' },
{ id: 4, name: 'Channel 4' },
];
this.activeStation = {}
}
editStation(station) {
this.activeStation = station;
}
<div class="station">
<input value.bind="activeStation.name"/>
<div repeat.for="select of activeStation.channels">
<select value.bind="activeStation.channel[$index]">
<option model.bind="item" repeat.for="item of channels"></option>
</select>
</div>
</div>
<div class="summary">
<div repeat.form="station of stations">
<h3>${station.name}</h3>
<div repeat.for="channel of station.channels">
${channel ? channel.name : 'N/A'}
</div>
<div class="edit"><a click.delegate="editStation(station)">Edit</a></div>
</div>
</div>
If I reset the channels for each station after they have updated, only then does the summary update.
I do this by using map to re-map the stations, ie;
this.activeStation.channels = this.activeStation.channels.map(station);
I would prefer to not have to reset the channels after each update, this seems like a bit of overkill.
Nice question. The behavior you observed is because the repeat at the <div/> inside div.summary element couldn't see the changes to the array, since the mutation is done via index setter (caused by <select/> binding). So we have 2 choices:
Make the mutation to channels array of each station notify the array observer
Make the repeat aware of changes inside the array.
For (2), we can do it either in your way, or a value converter way to avoid modifying source array on edit. You can see an example here https://codesandbox.io/s/httpsstackoverflowcomquestions59571360aurelia-repeat-for-within-repeat-for-yuwwv
For (1), we need to resolve to manual change handling of the select, via change event
EDIT: in v2, we already fixed this issue so it will properly & naturally work without us having to add these work around.
This is for a vueJS form. I have a nested value named "medications" I'm trying to submit for a form....I have this code in my template and data area that is related to medications. after I select the medication from the select box and enter the remaining fields and submit I get an error telling me I'm not submitting all my values...here are snips from my code...
NOTE: I'm not showing the entire form...only the part related with medication form field.
<template>
...
<div class="col-sm-2">
<b-form-select v-model="medication">
<option selected :value="null">Medication</option>
<option value="name" v-for="catMed in catMedications">{{catMed.medication.name}}</option>
</b-form-select>
</div>
...
</template>
data(){
...
duration: '',
frequency: '',
name: '',
medication: {name: '', duration: '', frequency: '', dosage: '', notes: ''},
...
(also, here is my POST function..if it helps)
postFeedings(catID, catName) {
const vm = this;
axios.post(`/api/v1/carelogs/`,{
cat: {id: catID, name: catName},
weight_unit_measure: 'G',
weight_before_food: this.weight_before_food,
food_unit_measure: 'G',
amount_of_food_taken: this.amount_of_food_taken,
food_type: this.food_type,
weight_after_food: this.weight_after_food,
stimulated: this.stimulated,
stimulation_type: this.stimulation_type,
medication: {name: vm.name, duration: vm.duration, frequency: vm.frequency, dosage: vm.dosage, notes: vm.notes},
medication_dosage_unit: 'ML',
medication_dosage_given: this.medication_dosage_given,
notes: this.notes
})
.then(response => {
console.log(response);
response.status === 201 ? this.showSwal('success-message','Carelog added') : null;
this.getFeedings(catName);
})
.catch(error => {
console.log(catID, catName);
console.log(error);
this.showSwal('auto-close', error);
})
}
ERROR: This is the error I get back ....
{"medication":{"frequency":["This field may not be blank."],"name":["This field may not be blank."]}}
ALL THE OTHER PARAMS ARE BEING SENT...but the ones for medication are not...
What am I doing wrong?
EDIT: updated axios post as Husam Ibrahim suggested
Like Husam says, In a function definition, this refers to the "owner" of the function. So when u access this in the axios function, this refers to the axios function, not to the vue instance.
Also - what i like to do is, create the object in the data of the vue instance, and use that for your post. Makes much cleaner code, and vue can access the object and properties.
Like this:
data () {
myObject: {
data1: 'abc',
data2: 'def',
data3: 123,
data4: false
}
}
and the axxios function like this:
const vm = this;
axios
.post('url.here', vm.myObject)
.then(response => {
// Handle response..
});
In vue you can use v-model="myObject.data1" to access the properties. This way you can use axxios get and assign the result to vm.myObject and vue will render the new data.
The key was in how I was getting "name" in my template. So I changed it up to this...
<div class="col-sm-2">
<b-form-select v-model="medication">
<option selected :value="null">Medication</option>
<option :value=catMed.medication.name v-for="catMed in catMedications">{{catMed.medication.name}}</option>
</b-form-select>
</div>
NOTE: see how :value=catMed.medication.name is configured? That's the key. now when I inspect my params in the browser I can see that I'm setting Medication.name to the value I intend.
And inside my axios.post I change the medication line to this...
...
medication: {name: this.medication, duration: this.duration, frequency: this.medication_dosage_given, dosage: this.dosage, notes: this.notes},
...
Now the two values are posting params ^_^
here is my html file :
...
<span data-dojo-id="staffStore" data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props='data:../../staff.json'></span>
<input data-dojo-type="dijit.form.ComboBox"
data-dojo-props="store: staffStore,
keyAttr: 'id',
searchAttr: 'staff_name',
autoComplete: true,
id: 'staff_name',
name:'staff_name',
value: '' "/>
...
and the json data goes as follows:
{
identifier: "id";,
label: "id",
items: [{id: 982483700, staff_name: "guanyu";},{id: 582057769, staff_name: "zhangfei";},{id: 166802994, staff_name: "zhaoyun";}]
}
here is my problem:
when i use post method i have got 'staff_name' in the searchAttr: 'staff_name' passed to the background-appication ,but i want to have the 'id' in the keyAttr: 'id' passed to background-application.in a word,i have passed made a wrong post action.can someone help me get out of this problem?
Use dijit/form/FilteringSelect not dijit/form/ComboBox.
You can enter any text into a ComboBox therefore it cannot return id which is the reason it returns text (or label or searchAttr). FilteringSelect allows only to chose one of options and therefore it can return id, which it does.
See it in action and experiment at jsFiddle: http://jsfiddle.net/phusick/QzQ38/