如何从laravel 6.x到vuejs访问特定变量（我尝试动态实现鼠标悬停）

Question

我需要从我的数组访问一个特定对象，该数组来自我的控制器。

<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>

并且我需要在函数mouseOver中访问aesp.color

 mouseOver: function(){

  console.log(this.aespNew);
  this.bgColor = 'yellow'; //<-- the aesp.color hear, but i cant for now, why?

       },

和此console.log(this.aespNew);印刷品

当我悬停按钮的任何一项时，此功能也会以相同颜色的按钮悬停

Answer 1

从您的代码中我们可以看到aespNew是您在v-for="(aesp ,index) in aespNew"上循环的数组。因此，可以预期您会收到该数组的所有项目。您正在寻找的是将aesp传递给您的mouseOver回调。

@mouseover="mouseOver(aesp)"

mouseOver: function(aesp) {
    this.bgColor = aesp.color;
},

一个很好的例子可以在docs中找到。