如何从 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 中找到一个很好的例子。

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

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

laravel

vue.js

laravel-6