구성 요소 Vue 3에서 속성 렌더링 방법

구성 요소 Vue 3에서 속성 렌더링 방법

제품은 두 가지 종류가 있습니다. 단순한 제품과 구성 가능한 제품입니다.

"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
  }
]

작업을 통해 얻은 위의 데이터(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
}

그리고 초보자들로부터 얻습니다.

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 또는 상위 구성 요소에 로직을 작성해야 합니까?

상위 구성 요소에서 하위 구성 요소로 데이터를 푸시하려고 했습니다.하지만 그것은 다시 거기서 멈췄습니다.또한 게터를 사용하여 색상 속성과 크기 속성을 분리하려고 했습니다.

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: 원하는 경우 즉시 이름을 바꿀 수도 있습니다.

계산된 속성 및 하위 구성 요소로 속성 전송을 통해 이 문제를 해결했습니다.

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
  }
}

언급URL : https://stackoverflow.com/questions/74273082/how-render-attributes-in-component-vue-3