was ist das ? wo bin ich ?
Ok Ok ... breath deeply and bare with me !
actually we want to do s.th like this here :
watch its functionality :
as you can see you need the codes from issue #9 so read it before getting to this . first you need to create that chat place that is a full HTML CSS project , so I skipped this part and just I share these codes :
<h2 style="display:inline-block;color:#fff">{{userToChat}}</h2>
as you can see in picture I am only sending a name from allies list to chat . in middle of process we save the name in userToChat then show it in this div . so the data has new variable:
userToChat:'Not Picked',
so I need to send the name from ally list to chat by click :
<div class="friendsinfo" v-for="(ally, name) in allies" @mouseover="leftoright" @mouseleave="righttoleft" @click="keepactive($event,ally.name)">
as you can see v-for="(ally, name) in allies" is receiving both item(that we named it ally) and name from ally. in event handler @click="keepactive($event,ally.name)" we are sending html element information and ally.name to keepactive function
for more lets console.log them :
console.log (clicked.target) :
console.log (clicked.target) :
with these codes you will passing a name from one element to another one .
now you are so happy that you are having a good result BUT what if you need other variables from ur data , what happened to that search part that I said ?
top method is good for passing one variable (in this example name) but when you want to receive an entire row some where else , you have to use the method bellow :
STEP1 : you need to add variable to data part as much as you need here I just add one cause I need one :
chatname:'Not Picked',
we store the name of result row to chatname ( you can store more details to different variables )
STEP2 : add those variables to the target element :
<h2 style="display:inline-block;color:#fff">{{chatname}}</h2>
STEP3 : now that we create our variables and define our target element now we can use them in a function : calling function :<div class="friendsinfo" v-for="(ally, name) in allies" @mouseover="leftoright" @mouseleave="righttoleft" @click="keepactive($event,ally.name)">
we are sending $event (that has element in it) and ally.name to our function
function itself :
we store $event in clickedand ally.name in clickedname
check piece by piece :
$(".friendsinfo").css('box-shadow','0px 0px 0px 0px');
removes the active style ( golden shadow ) from all elements that have class of friendsinfo
clicked.target.style.boxShadow = "9px 2px 25px 7px rgba(171,164,40,1)";
gives the active style ( golden shadow ) to clicked elements
for (var counter=0 ; counter<this.allies.length ; counter++){
if (this.allies[counter].name == this.userToChat ) {
this.chatname = this.allies[counter].name ;
break;
}
}
we create a counter that checks the name we are receiving from click event with all the names in data if finds a match will store it in chatname ( you can store more data and show them some where else )
It was a little complicated but if you try it , you will find the answer of those questions are in your mind !
let me know if you need more help
was ist das ? wo bin ich ?
Ok Ok ... breath deeply and bare with me !
actually we want to do s.th like this here :
as you can see you need the codes from issue #9 so read it before getting to this . first you need to create that chat place that is a full HTML CSS project , so I skipped this part and just I share these codes :
watch its functionality :
<h2 style="display:inline-block;color:#fff">{{userToChat}}</h2>as you can see in picture I am only sending a name from allies list to chat . in middle of process we save the name in userToChat then show it in this div . so the data has new variable:userToChat:'Not Picked',so I need to send the name from ally list to chat by click :
<div class="friendsinfo" v-for="(ally, name) in allies" @mouseover="leftoright" @mouseleave="righttoleft" @click="keepactive($event,ally.name)">as you can see
v-for="(ally, name) in allies"is receiving both item(that we named it ally) and name from ally. in event handler@click="keepactive($event,ally.name)"we are sending html element information and ally.name to keepactive functionfor more lets console.log them : console.log (clicked.target) :
with these codes you will passing a name from one element to another one .
now you are so happy that you are having a good result BUT what if you need other variables from ur data , what happened to that search part that I said ?
console.log (clicked.target) :
top method is good for passing one variable (in this example name) but when you want to receive an entire row some where else , you have to use the method bellow : STEP1 : you need to add variable to data part as much as you need here I just add one cause I need one :
we store the name of result row to
chatname( you can store more details to different variables ) STEP2 : add those variables to the target element :<h2 style="display:inline-block;color:#fff">{{chatname}}</h2>STEP3 : now that we create our variables and define our target element now we can use them in a function :
calling function :
<div class="friendsinfo" v-for="(ally, name) in allies" @mouseover="leftoright" @mouseleave="righttoleft" @click="keepactive($event,ally.name)">we are sending $event (that has element in it) and ally.name to our function function itself :we store
$eventinclickedandally.nameinclickednamecheck piece by piece :
$(".friendsinfo").css('box-shadow','0px 0px 0px 0px');removes the active style ( golden shadow ) from all elements that have class offriendsinfoclicked.target.style.boxShadow = "9px 2px 25px 7px rgba(171,164,40,1)";gives the active style ( golden shadow ) to clicked elementswe create a counter that checks the name we are receiving from click event with all the names in data if finds a match will store it in chatname ( you can store more data and show them some where else )
It was a little complicated but if you try it , you will find the answer of those questions are in your mind ! let me know if you need more help