We Keep Coding

changing model property value is changing the same property in other object

im new to vue , i want user to be able to add some specific social media links to the page and edit some properties like it's text
i have 2 objects in my data , models and defaults
defaults contains selectable option for social media links and their initial values
basically i copy the default value into models and let the user customize the model via inputs
data () {
return {
models : [] ,
defaults : {
twitter : { id : null , placeholder : 'my twitter' , icon : 'twitter' , text : null , 'link' : null } ,
instagram : { id : null , placeholder : 'my instagram' , icon : 'instagram' , text : null , 'link' : null } ,
tiktok : { id : null , placeholder : 'my tiktok' , icon : 'tiktok' , text : null , 'link' : null } ,
} ,
}
} ,
so there a select menu for user to select which social he wants to add to the page
Select :
<ul >
<li v-for="(social, index ) in defaults" :key="index">
<a #click="appendSocial(index)">
{{ index }}
</a>
</li>
</ul>
here is my #click="appendSocial(index)" function
appendSocial(type){
let typedefault = this.defaults[type];
this.models.push(typedefault)
},
and finally i show my models to user and provide an input for editing it's text via v-model
<div v-for="(model, index) in models" v-bind:key="model.id">
<a class="button-preview">
{{ model.text === null ? model.placeholder : model.text }}
</a>
<label>Text</label>
<input type="text" v-model="model.text" :key="index" :placeholder="model.placeholder">
</div>
so here is the problem , for some reason changing the models properties will change the same property in defaults ... and changing defaults properties will change the same property models !!
like if i add a twitter menu to the page and change it's text (model.text) to abc via v-model ... it will also change defaults.twitter.text to abc
to better demonstrate the problem i've added some console log to my appendSocialfunction
appendSocial(type){
let typedefault = this.defaults[type];
console.log(`-------- default object for ${type} -----------`);
console.log(typedefault);
this.addElement(typedefault);
},
here is the result
1 - i've selected a twitter link and added to my models , you can see defaults.twitter.text is null
2 - i've change my model.text (i suppose it would be models[0].text) to abc
3 - i've added another twitter link to my page ... this time defaults.twitter.text is also abc
also changing defaults properties will effect all the models the has been getting their value from that default object
like if i change the defaults.instagram.text to xyz all my models which have got their initial values from defaults.instagram will also change their text to xyz
it's like they are referencing each other , but i haven't passed the value between 2 objects by reference
im not sure what's happening here and how can i prevent this ?

This is because
let typedefault = this.defaults[type];
this.models.push(typedefault)
Is storing the reference to the object into your this.models array. And so if you mutate the element, you're by default changing the base object. A quick and dirty way of doing a deep clone is the following.
let typedefault = this.defaults[type];
let clonedObj = JSON.parse(JSON.stringify(typedefault));
this.models.push(clonedObj)
Note: Lodash library does have a proper deep clone functionality.
https://www.geeksforgeeks.org/lodash-_-clonedeep-method/

JS Conditional Template in Column

I'm pretty new to JavaScript and it makes this even more difficult for me.
I'm trying to put a condition in my column template but I can't get it to work.
The code is this:
template: '#viewMode' == "EDIT" ? '<input class="equipDropDownEditor"/>' : "#:PROMOTION_TYPE#",
This almost shows what I want. The problem is that if the Promotion_Type field is null, it shows null on the screen.
So, the condition that I want to implement is: If the viewmode is "edit", it will return the equipDropDownEditor.
In case it is not, it shows the field PROMOTION_TYPE. But, in case that Promotion_Type returns a null, I don't want it to show anything (empty string, for example.
This is what I have tried. Still got the null on the screen when the "viewMode" is not "EDIT".
template: '#viewMode' == "EDIT" ? '<input class="equipDropDownEditor"/>' : ("#:PROMOTION_TYPE#" == null ? " " : "#:PROMOTION_TYPE#"),

To help someone in the future, I got it working with: template:
'#viewMode' == "EDIT" ? '<input class="equipDropDownEditor"/>' : ("#:PROMOTION_TYPE#" == null ? " " : "#:PROMOTION_TYPE#" == "#:PROMOTION_TYPE#"),
Thanks anyway #Bertrand Le Roy

ng-style with 2 if and else condition

Hello I'm trying to use two conditions for ng-style for angular. trip.reviewed (true/false) and trip.approval (true/false). here is my try below but I get errors. I cant find the correct format.
[ngStyle]="{'background-color': trip.approval? '#80ff80' : '#ff8080'} : {'background-color': trip.reviewed? '' : '#D3D3D3'}"

just use it:
[ngStyle]="{'background-color': tripReviewed ? (tripApproval ? '#80ff80' : '#ff8080') : '#D3D3D3'}"
Demo: https://stackblitz.com/edit/angular-rmaxnt

Angular, a filter for discounts - passing variables into filter?

So I have a little app where a user can play around with discounts to see an price of a product. They pick a product which comes from a drop down - an ng-repeat, then they select 1 of 3 discounts, and I would like to try and display the result with the discount price. So My first thought is maybe a filter can do this? But I'm unclear if this is the correct direction with this.
Here's what I have
In the controller -
$scope.myItems = [{"id":0,"name":"item1", "price" : 3.50 },{"id":1,"name":"item2", "price" : 5.50 },{"id":2,"name":"item 3", "price" : 4.75 }];
$scope.discount1 = 0.7;
$scope.discount2 = 0.25;
//the users information that tells us which discounts he/she has
$scope.user = {'name' : 'Ted', 'discount1' : false, 'discount2': true};
So the discounts would just be a multiplier if they are selected to give the discounted price.
And on the view I have :
<select ng-model="itemSelected" ng-options="item as item.name for item in myItems"> </select>
and I would want to do something like:
<p>Your price:</p>
{{itemSelected.price | (filtered by discounts if true in $scope.user) }}
Is something like this possible? If so I could really use some guidance on how to take this problem down. Thanks for reading!

app.filter('discount', function(){
return function(input, discount){
if (input) return input*(1-discount);
}
})
In your html
{{itemSelected.price | discount : discount1}}
Here is an example
EDIT
if you want to determine the discount using your object (which in my opinion is a bad structure, but maybe you it's for demo purposes) then you can have this piece of code in the controller
$scope.discount = ($scope.user.discount1 && $scope.discount1)||($scope.user.discount2 && $scope.discount2)
and use in html
{{itemSelected.price | discount : discount}}

Not sure that you really need filter for this, is fairly easy to this calc without one:
<p ng-if="itemSelected && user">Your #1 price:
{{itemSelected.price * (user.discount1 ? 1- discount1 : 1) | number : 2}}</p>

Ext JS Search possibility in MultiSelect ComboBox

I want to know that how in ExtJS MultiSelect ComboBox i can search for a value. Like if i have entered 's' then a list of items starting with a must be displayed and the item selector should select if it matches with 's'.
This is the code i tried.....
cbCfg = {
name : property.columnname,
hideOnSelect : false,
triggerAction : 'all',
mode : 'local',
width : comboFieldSize,
store : new Ext.data.SimpleStore({
id : 0,
fields : ['strValue','strText'],
data : data
}),
listWidth : 400,
valueField : 'strValue',
displayField : 'strText'
};
field = new form.MultiCombo(cbCfg);
thnkz in advance,
just:-)

I assume that MultiSelect ComboBox extends functionality of Ext.form.ComboBox.
You could try going with triggerAction : 'query', which is the default - it should filter out non-matching entries. Although that could be a little bit counter-intuitive for the user.
Another possible approach is adding typeAhead : true property - should trigger suggesting suggestions based on the text entered by user.