如何渲染组件Vue 3中的属性

dfuffjeb 于 2022-11-17 发布在 Vue.js

关注(0)|答案(2)|浏览(192)

我公司产品有两种类型：简单且可配置：

"products" : [
  {
    "type": "simple",
    "id": 1,
    "sku": "s1",
    "title": "Product 1",
    "regular_price": {
      "currency": "USD",
      "value": 27.12
    },
    "image": "/images/1.png",
    "brand": 9
  },
  {
    "type": "configurable",
    "id": 2,
    "sku": "c1",
    "title": "Product 2",
    "regular_price": {
      "currency": "USD",
      "value": 54.21
    },
    "image": "/images/conf/default.png",
    "configurable_options": [
      {
        "attribute_id": 93,
        "attribute_code": "color",
        "label": "Color",
        "values": [
          {
            "label": "Red",
            "value_index": 931,
            "value": "#ff0000"
          },
          {
            "label": "Blue",
            "value_index": 932,
            "value": "#0000ff"
          },
          {
            "label": "Black",
            "value_index": 933,
            "value": "#000"
          }
        ]
      },
      {
        "attribute_code": "size",
        "attribute_id": 144,
        "position": 0,
        "id": 2,
        "label": "Size",
        "values": [
          {
            "label": "M",
            "value_index": 1441,
            "value": 1
          },
          {
            "label": "L",
            "value_index": 1442,
            "value": 2
          }
        ]
      }
    ],
    "variants": [
      {
        "attributes": [
          {
            "code": "color",
            "value_index": 931
          },
          {
            "code": "size",
            "value_index": 1441
          }
        ],
        "product": {
          "id": 2001,
          "sku": "c1-red-m",
          "image": "/image/conf/red.png"
        }
      },
      {
        "attributes": [
          {
            "code": "color",
            "value_index": 931
          },
          {
            "code": "size",
            "value_index": 1442
          }
        ],
        "product": {
          "id": 2002,
          "sku": "c1-red-l",
          "image": "/image/conf/red.png"
        }
      },
      {
        "attributes": [
          {
            "code": "color",
            "value_index": 932
          },
          {
            "code": "size",
            "value_index": 1441
          }
        ],
        "product": {
          "id": 2003,
          "sku": "c1-blue-m",
          "image": "/image/conf/blue.png"
        }
      },
      {
        "attributes": [
          {
            "code": "color",
            "value_index": 933
          },
          {
            "code": "size",
            "value_index": 1442
          }
        ],
        "product": {
          "id": 2004,
          "sku": "c1-black-l",
          "image": "/image/conf/black.png"
        }
      }
    ],
    "brand": 1
  }
]

以上数据我用**actions（Vuex）**得到

GET_PRODUCTS_FROM_API({ commit }) {
  return axios('http://localhost:8080/products', {
    method: 'GET',
  })
    .then((products) => {
      commit('SET_PRODUCTS_TO_STATE', products.data);
      return products;
    })
    .catch((e) => {
      console.log(e);
      return e;
    });
}

然后我改变数据

SET_PRODUCTS_TO_STATE: (state, products) => {
    state.products = products
}

并从getter中获取

PRODUCTS(state) {
    return state.products = state.products.map((product) => {
        const brand = state.brands.find((b) => b.id === product.brand)
        return {...product, brandName: brand?.title || 'no brand'}
    })
}

之后我将获取组件中的数据
目前我还在纠结如何渲染一个可配置产品的颜色和大小属性。告诉我怎么做才是正确的？我需要在vuex或父组件中编写逻辑吗？
我试着把数据从父组件推到子组件。但是它又停在那里了。我还试着用getter把颜色和大小属性分开。

vue.js

来源：https://stackoverflow.com/questions/74273082/how-render-attributes-in-component-vue-3

2条答案

按热度按时间

fwzugrvs1#

对于Vuex，语法如下

<template>
  <div>
    <div v-for="product in products" :key="product.id">
      <span>type: {{ product.type }}</span>
      <span>type: {{ product.title }}</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['products']),
    ...mapGetters('fancyNamespace', ['products']), // if namespaced
  },
}
</script>

至于在哪里调用它，我猜直接进入组件。否则，正如这里所解释的，使用Vuex可能根本不相关。
PS：如果你想的话，你甚至可以rename on the fly。

赞(0）回复(0）举报 2022-11-17

k10s72fa2#

通过计算属性和将属性传递到子组件解决了此问题

computed: {
  getAttributeColors() {
    let attributes_colors = []
    this.product_data.configurable_options.map((item) => {
      if(item.label === 'Color') {
        attributes_colors.push(item.values)
      }
    })
    return attributes_colors
  },
  getAttributeSize() {
    let attributes_size = []
    this.product_data.configurable_options.map((item) => {
      if(item.label === 'Size') {
        attributes_size.push(item.values)
      }
    })
    return attributes_size
  }
}

赞(0）回复(0）举报 2022-11-17

我来回答

如何渲染组件Vue 3中的属性

2条答案

相关问题

热门标签

最新问答