Issue
i need access to a especific object from my array, this array comes from my controller.
<div class="col-md-3" v-for="(aesp ,index) in aespNew" :key="aesp.id" :data-id="aesp.id">
<div v-if="aesp.lang == 0">
<button type="button"
v-bind:style="{ backgroundColor: aesp.color, color: texColor, borderColor: aesp.color }"
class="btn btn-primary"
@mouseover="mouseOver()"
@mouseout="mouseOut()"
:data-id="aesp.area_id"
>{{ aesp.areaEs }} <span><b>{{ aesp.id }}</b></span>
</button>
<br>
</div>
</div>
and I need access to aesp.color
in my function mouseOver
mouseOver: function(){
console.log(this.aespNew);
this.bgColor = 'yellow'; //<-- the aesp.color hear, but i cant for now, why?
},
and this console.log(this.aespNew);
print
this function when i hover any item of buttons, the items hover too with the same color of button
Solution
We can see from your code that aespNew
is an array you loop over v-for="(aesp ,index) in aespNew"
. So yeah it is expected that you receive all the items of that array. What you are looking for is passing the aesp
to you mouseOver
callback.
@mouseover="mouseOver(aesp)"
mouseOver: function(aesp) {
this.bgColor = aesp.color;
},
A good example can be found in the docs.
Answered By - Thomas Van der Veen Answer Checked By - Pedro (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.