0

我在一个显示一些数据的项目中（我正在使用 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 组件导入到我的 Paris 路线中，在那里我对其中的数据进行了循环：

<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",
                    latLng: [40.7878, -74.1396]
                }
            ]
        }
    },
    computed: {
      ...mapState([
          'selectedMarker',
          'detailsMenu'
      ])
    },
</script>

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

4

0 回答 0