[FIXED] How can I access a specific variable from laravel 6.x to vuejs (i try implement mouseover dynamically)

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)