Question

整个晚上，我的头一直撞在墙上。我仍在学习vue / nuxt / vuex生态系统。我已经在vuex中建立了一些状态数据。

我正在处理的页面是使用nuxt的动态路线功能的动态路线页面。我的主要T恤阵列中有服装阵列的列表，并且我试图能够显示存储在子阵列中的图像，然后在单击时也进行更新。当使用vue时，很简单，它将具有以下计算属性：

        image() {
            return this.varients[this.selectedVarient].varientImage
        },

这将允许我仅使用：src =“ image”函数并显示图像。

尝试使用vuex状态来获取具有相同计算样式图像属性的数据，但我不知道如何正确显示它。这是一个vuex状态数据的快速示例：

{
      selectedGarment: 0,
      id: 'into_woods_tshirt',
      img: require('../assets/img/shop/into_the_woods_tshirt.png'),
      title: 'INTO THE WOODS',
      description: 'Premium Unisex Tee',
      colorChoice: '9 Color Choices',
      price: '$27.95',
      garmentImage: require('../assets/img/shop/into_the_woods/tshirts/into_the_woods_dark_grey_heather.png'),
      garmentID: 1569,
      garmentColor: 'Dark Heather Grey',
      garments: [
        {
          garmentID: 1569,
          garmentColor: 'Dark Heather Grey',
          garmentName: 'dark-grey',
          garmentImage: require('../assets/img/shop/into_the_woods/tshirts/into_the_woods_dark_grey_heather.png')
        },
        {
          garmentID: 1570,
          garmentColor: 'Heather Navy',
          garmentName: 'heather-navy',
          garmentImage: require('../assets/img/shop/into_the_woods/tshirts/into_the_woods_dark_grey_heather.png')
        },
        {
          garmentID: 1571,
          garmentColor: 'Heather Deep Teal',
          garmentName: 'heather-deepteal',
          garmentImage: require('../assets/img/shop/into_the_woods/tshirts/into_the_woods_dark_grey_heather.png')
        },
        {
          garmentID: 1572,
          garmentColor: 'Heather Slate',
          garmentName: 'heather-slate',
          garmentImage: require('../assets/img/shop/into_the_woods/tshirts/into_the_woods_dark_grey_heather.png')
        },
        {
          garmentID: 1573,
          garmentColor: 'Heather Forest',
          garmentName: 'heather-forest',
          garmentImage: require('../assets/img/shop/into_the_woods/tshirts/into_the_woods_dark_grey_heather.png')
        },
        {
          garmentID: 1574,
          garmentColor: 'Heather Mossy',
          garmentName: 'heather-mossy',
          garmentImage: require('../assets/img/shop/into_the_woods/tshirts/into_the_woods_dark_grey_heather.png')
        },
        {
          garmentID: 1575,
          garmentColor: 'Heather Clay',
          garmentName: 'heather-clay',
          garmentImage: require('../assets/img/shop/into_the_woods/tshirts/into_the_woods_dark_grey_heather.png')
        },
        {
          garmentID: 1576,
          garmentColor: 'Heather Maroon',
          garmentName: 'heather-maroon',
          garmentImage: require('../assets/img/shop/into_the_woods/tshirts/into_the_woods_dark_grey_heather.png')
        },
        {
          garmentID: 1577,
          garmentColor: 'Heather Purple',
          garmentName: 'heather-purple',
          garmentImage: require('../assets/img/shop/into_the_woods/tshirts/into_the_woods_dark_grey_heather.png')
        },
      ]
    }

使用nuxt的所有逻辑将其与nuxt存储在shop文件夹中。

在我的_id.vue文件中，我有此代码。我可以使用计算出的T恤功能列出按钮所需的数据，但是我想不起来如何从与页面ID相关联的服装数组中获取图像并显示它们的运气。

<template>
 <div class="garment">
   <div class="container is-fluid">
     <div class="columns is-multiline">
       <div class="column is-2">
         <!-- SIDE PANEL IMAGES -->
       </div>
       <div class="column is-6">
         <img class="main-image" :src="image">
       </div>
       <div class="column is-4">
         <h1 class="title">{{tshirt.title}}</h1>
           <h2 class="subtitle">{{tshirt.price}}</h2>
           <hr>
           <div class="columns">
             <div class="column is-1 round-button"
             :id="garment.garmentName"
             v-for="(garment, index) in tshirt.garments"
             :key="garment.garmentID"
             v-on:click="updateProduct(index)"
             >
             </div>
           </div>
       </div>
     </div>
   </div>
 </div>
</template>


<script>
export default {
  data () {
    return {
      id: this.$route.params.id
    }
  },
  methods: {
    updateProduct(index) {
    this.selectedGarment = index
    console.log(index)
    }
  },
  computed: {
    tshirt () {
      return this.$store.state.tshirts.tshirt.find(tshirts => tshirts.id === this.id)
    },
    // image () {
    //   return this.$store.state.tshirts.tshirt(this.id.garments).garmentImage
    // }
  }
}
</script>

我能够使用计算出的T恤功能获取所有数据，并查看具有我的产品ID的所有数据，但我似乎无法弄清楚如何为服装图像创建计算功能并显示它们在我的应用程序中。任何帮助将不胜感激。

使用vuex和nuxt

0 个答案: