Question

我有两个从vuex获取数据的组件。第一个组件是带有图像的滑块。当您单击图像时，第二个组件应显示有关每张图片的信息。如何跟踪索引并将其传递给第二个组件以显示正确的信息

这是我的商店：

sideSwiperItems: [
  {
    id: "001",
    smallImage: require("@/assets/jpg/sideMenu-01.jpg"),
    data: [
      {
        height: "100 ft",
        widht: "10 ft",
      },
    ],
  },
  {
    id: "002",
    smallImage: require("@/assets/jpg/sideMenu-02.jpg"),
    data: [
      {
        height: "200 ft",
        widht: "20 ft",
      },
    ],
  },

第一部分

swiper-slide.swiper__thumb-position(
        v-for='(item, idx) in this.$store.state.buildingData.sideSwiperItems' 
        :key='idx'  
        :class=`'slide-'+(idx+1)`
      ) {{item.smallImage}}

第二部分

div(
 v-for=`(item, idx) in this.$store.state.buildingData.sideSwiperItems`
 :key='idx'
)
 p.side__block-month
  | {{item.data.height}}
  | {{item.data.width}}

Answer 1

您必须将要传递的数据存储到第二个元素中。例如，您要传递第一个组件的选定索引，然后必须将选定对象存储到存储中：

sideSwiperItems: [
 ...
],
selectedObject: null

您可以像这样轻松分配所选对象

swiper-slide.swiper__thumb-position(
        v-for='(item, idx) in this.$store.state.buildingData.sideSwiperItems'
        @click="onClick"
        :key='idx'  
        :class=`'slide-'+(idx+1)`
        ) {{item.smallImage}}

methods: {
 onClick: (item) => {
  this.$store.state.buildingData.selectedObject = item
 }
}

如果第一个元素和第二个元素位于同一组件中，则无需将所选对象分配到Vuex存储中即可执行此操作。只需使用组件的数据

Vuex如何跟踪索引并将其传递给组件？

1 个答案: