循环中 selectedItem 的 Vue 对象未定义使用 vue-stator

编程问答 2022-05-17

问题描述

我在一个项目中显示一些数据（我使用的是 vue2-leaflet）。 事情是这样的，我有一个 Target 组件：

<template>
    <l-marker
        v-on:click="detailsMarker(item)"
        :lat-lng="latLng"
    >
        <l-icon :icon-size="[80,80]">
            <div class="flex flex-col items-center">
                <img 
                    class="object-cover w-20 h-20 border-2 border-white rounded-full"
                    :src="picture" 
                />
                <Badge :badge="name" />
            </div>
        </l-icon>
    </l-marker>
</template>

<script>
import { mapActions } from 'vue-stator'

export default {
    name: 'Target',data () {
        return {
            item: {}
        }
    },props: {
        picture: String,name: String,latLng: Array
    },methods: {
        ...mapActions(['detailsMarker'])
    }
}
</script>

正如你所看到的，我从 store.js 文件中导入了我的 detailsMarker 方法（使用 vue-stator，一个类似 vuex 的状态管理）：

import Vue from 'vue';
import L from 'leaflet';
import { plugin as VueStator } from 'vue-stator';

Vue.use(VueStator,{
    state: () => ({
        detailsMenu: false,selectedMarker: {},...
    }),actions: {
        detailsMarker(state,selectedItem) {
            this.state.selectedMarker = selectedItem;
            this.state.detailsMenu = true;
        }
    }
})

然后我将 Target 组件导入到我的巴黎路线中，我在那里循环数据：

<template>
    <div>
        <Target
           v-for="item in targets"
           :key="item.id"
           :latLng="item.latLng"
           :picture="item.image"
           :name="item.name"
        />
    </div>
</template>

<script>
export default {
    data () {
        return {
            targets: [
                {
                    name: "Viktor Novikov",image: "https://static.wikia.nocookie.net/hitman/images/a/a0/Viktor_novikov.png",description: "A self-made billionaire ...",latLng: [40.7878,-74.2196]
                },{
                    name: "dalia Margolis",description: "The right face at the right time,...",image: "https://static.wikia.nocookie.net/hitman/images/c/ce/dalia_margolis.png",-74.1396]
                }
            ]
        }
    },computed: {
      ...mapState([
          'selectedMarker','detailsMenu'
      ])
    },</script>

所以，当我点击我的标记时， detailsMarker 方法确实显示了侧边栏组件（带有 detailsMenu 数据），但它没有选择目标数组中的对象。我不明白为什么，因为在控制台中我没有错误。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

loopsobjectobjectobjectvue.jsvue2leaflet