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
Related
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
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.
I am using ionic 4 and i have a very strange issue. i have created a child components called social icons which is used to like or unlike ..etc. This child component will be called from parent component as shown below.
PARENT COMPONENT
<ion-card *ngFor="let creative of getArray">
<ion-card-header>
<social-icons [coll]="creative" (iconClicked)="updateUserReaction($event,creative?.id)"></social-icons><br>
</ion-card-header>
</ion-card>
Here i am calling child component within ngFor . Also i am passing creative obj to the child component.
creative obj :
{firstname: "Murali", description: "Photography of cute", nooflikes: 0, type: "creative", lastname: "Techwedge", …}
description: "Photography of cute"
elasticSearch_id: "creative_50"
file_type: "jpg"
filepath: "/documents/assets/Images/creative/IMG-20190310-WA0001_50.jpg"
firstname: "Murali"
id: 50
lastname: "Techwedge"
name: "Photography of cute"
noofcomments: 0
nooflikes: 0
noofshares: 0
noofunlikes: 2
resource_name: "IMG-20190310-WA0001_50.jpg"
socialIcons: Array(5)
0: {icon: "thumbs-up", operation: "cancellike", color: "danger"}
1: {icon: "thumbs-down", operation: "unlike"}
2: {icon: "eye", operation: "views"}
3: {icon: "text", operation: "comment"}
4: {icon: "settings", operation: "filter"}
length: 5
__proto__: Array(0)
timestamp: null
type: "creative"
user_id: 6
user_reaction: []
userobj: {id: 6, firstname: "Nikhil", lastname: "n", emailid: "nikhil#temp.org", password: "pass123", …}
views: 17
This is what creative obj data will be.
child component:
<ion-fab bottom>
<ion-grid>
<ion-row>
<ion-col size="2" *ngFor="let icon of coll?.socialIcons" >
<ion-card-title >
<ion-icon [color]="icon?.color" *ngIf="icon.icon != 'text' && icon.icon != 'settings'" [name]="icon.icon" (click)="clickedIcon(icon.operation)" style="font-size: 20px;"></ion-icon>
<ion-icon (click)="navigate()" *ngIf="icon.icon == 'text'" [name]="icon.icon" style="font-size: 20px;"></ion-icon>
<ion-icon *ngIf="icon.icon == 'settings'" [name]="icon.icon" style="font-size: 20px;" [routerLink]="['/filters/sharewith',{'id':coll?.id}]"></ion-icon>
</ion-card-title>
<ion-card-subtitle>
{{icon.value}}
</ion-card-subtitle>
</ion-col>
</ion-row>
</ion-grid>
</ion-fab>
Here in child component i am passing the color aattributes.
Below is the component.ts for child component.
ngOnInit() {
return new Promise((resolve, reject) => {
this.creativeServices.getCreativeReactions1(this.coll["id"],this.coll["userobj"]["id"]).pipe(map(res1=>res1.json())).subscribe(res1=>{
this.coll["user_reaction"] = res1;
this.coll["user_reaction"].map(element=>{
switch(element["latestReaction"]){
case 'like' :{
this.coll["socialIcons"][0]["color"] = "danger"
this.coll["socialIcons"][0]["operation"] = "cancellike"
break;
}
case "unlike":{
this.coll["socialIcons"][1]["color"] = "danger"
this.coll["socialIcons"][1]["operation"] = "cancelunlike"
break;
}
case "cancellike":{
this.coll["socialIcons"][0]["color"] = "default"
this.coll["socialIcons"][0]["operation"] = "like"
break;
}
case "cancelunlike":{
this.coll["socialIcons"][1]["color"] = "default"
this.coll["socialIcons"][1]["operation"] = "unlike"
break;
}
default:{
this.coll["socialIcons"][0]["color"] = "default"
}
}
})
resolve(this.coll)
console.log(this.coll)
})
})
// this.setTitle();
}
As you can see i am making a service call based on the response i get from the service call i am setting the color of icons for each creative object sent from parent component.
ISSUE : Suppose say if there is any value obtained from the response then the color of the icons changes for all the creatives irrespective of the switch condition.
say for a creative if the response from the service call is null then the color will be black.
now for second creative response exists based on the switch conditions the appropriate color is changed to this creative which is fine. But along with this the first creative color also gets changed. i,e this.coll.socialIcons arrays gets updated to all the creative objects.
I guess there is some issue with the way of rendering socialIcons.
Please let me know where am i going wrong?
This bit doesn't seem right:
case 'like' :{
this.coll["socialIcons"][0]["color"] = "danger"
this.coll["socialIcons"][0]["operation"] = "cancellike"
break;
}
case "unlike":{
this.coll["socialIcons"][1]["color"] = "danger"
this.coll["socialIcons"][1]["operation"] = "cancelunlike"
break;
}
case "cancellike":{
this.coll["socialIcons"][0]["color"] = "default"
this.coll["socialIcons"][0]["operation"] = "like"
break;
}
case "cancelunlike":{
this.coll["socialIcons"][1]["color"] = "default"
this.coll["socialIcons"][1]["operation"] = "unlike"
break;
}
default:{
this.coll["socialIcons"][0]["color"] = "default"
}
It's not clear what you're trying to do but whatever it is, you are only setting either ["socialIcons"][0] or ["socialIcons"][1] in all instances.
Problems with the question
You have not asked your question in a clear way, you should try to recreate an example with only the problem presented, and also give us all the information.
You are talking about user_reaction which has latestReaction in your code but when you posted a data sample user_reaction is just [].
If you are trying to run the code against an [] then its going to set the default case every time as its going to get undefined back from each switch test.
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/