Dynamicznie renderowanie cardsList.

Question

<template>
  <div :class="[this.variant ? `${this.className}__${this.variant}` : '', `${this.className}`]">
  <select
    :class="`${this.className}__select`"
  >
    <option v-for="card in cardListData.cards" :key="card.id" :value="card.id">{{ card.text }}</option>
  </select>
  <input @blur="closeList" @focus="showList" :value="pickedValue" :class="`${this.className}__input`" :placeholder="placeholder" type="text" />
    <div ref="container" :class="`${this.className}__container`">
      <ul :class="`${this.className}__list`">
        <li
          class="atomCardList__item"
          @mousedown="setHint"
          @mouseover="setHint"
          v-for="(card,index) in cardListData.cards"
          :data-label="prepareLabel(card)"
          :ref="`card${index}`"
          :data-id="card.id"
          :data-index="`${index}`"
          :key="index"
          @click="handleClick($event)"
        >
          <div :data-index="`${index}`" class="atomCardList__row">
            <div :data-index="`${index}` "class="atomCardList__imageContainer">
              <img :data-index="`${index}`" :src="`/images/${card.urlImg}.svg`" width='32px' height='32px' alt=''/>
              <small :data-index="`${index}`" class="atomCardList__imgLabel">{{card.imgLabel}}</small>
            </div> 
            <div :data-index="`${index}`" :class="['atomCardList__categoryWraper', card.category]">
              <p :data-index="`${index}`" :class="['atomCardList__categoryLabel', card.category]">{{ card.labelCategory }}</p>
            </div>
            <p :data-index="`${index}`" class="atomCardList__textContainer">
              {{card.text|cut}}
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import AtomMixinProps from '../Mixins/AtomMixin.js';
  import PropsCardList from '../Models/props/CardList';
  import { MockPropsDataCardList } from '../Mocks/props/CardList';
  export default {
    name: 'AtomSelectList',
    props: Object.assign({
      items: {
        type: Array,
        default: []
      },
      placeholder: {
        type: String,
        value: ''
      },
      cardListData: {
        type: Object,
        default: () => new PropsCardList(MockPropsDataCardList)
      },
    }, AtomMixinProps),
    watch: {
      cardListData() {
        this.computedHigh = this.cardListData.cards.length * 200;
      }
    },

    data() {
      return {
        search: '',
        idElement: `AtomCardList${Number.parseInt(Math.random() * Math.floor(10000))}`,
        textValue: '',
        computedHigh: 0,
        isOpen: false,
        className: 'atomCardList',
        pickedValue: ''
      };
    },
    mounted() {
      this.computedHigh = this.cardListData.cards.length * 240;
    },
    methods: {
      prepareLabel(card) {
        return `${card.imgLabel},${card.labelCategory}`
      },

      setHint(e) {
        let index = 'card' + e.target.dataset.index;
        this.pickedValue = this.$refs[index][0].dataset.label;
      },

      handleClick(e) {
        let index = 'card' + e.target.dataset.index;
        this.$emit('handleClick', this.$refs[index][0].dataset.id);
      },

      showList(e) {
        this.$refs.container.style.height = `${this.computedHigh}px`;
      },
      
      closeList(e) {
        this.$refs.container.style.height = '0px';
      }
    },
  };
</script>

Mamy taki komponent, który przyjmuje na wejście cards, ktore w zależności od wariantu mogą się różnić, np: nie posiadać category/zdjęcia etc. To wyświetla jakąś tam listę.

Chciałbym trochę uniweralić ten komponent, by również variant decydował jaką listę pokazać czy z zdjęciem, czy szersza czy węższą i tak dalej.

Przyszły mi 2 pomysły:

Zbudować faktorkę komponentu Vue, ale to dosyć czasochłodne by było.

2 to wykorzystać taką strukturę:

<component :is="putVariant" :data="data" />

co o tym myślicie?

 

Answer 1

Zdecydowanie dynamic component.

---

Czemu przekazujesz $event do handleClick/setHint, zamiast obiektu card?

Comments

Mówisz o tym?

 setHint(e) {
        let index = 'card' + e.target.dataset.index;
        this.pickedValue = this.$refs[index][0].dataset.label;
      },

      handleClick(e) {
        let index = 'card' + e.target.dataset.index;
        this.$emit('handleClick', this.$refs[index][0].dataset.id);
      },

Miałem ogromne problemy, by poprawne dane pobierały. Ale teraz sobie o tym myśle to tak masz racje będzie lepiej , jakoś mi nie przyszło do głowy :)

---

Problemy? to znaczy? Zapewne zmienia się lista i masz niepoprawnie przypisane :key (po indexach, zamiast card.id)

---

bardziej, focus wskazywał głupoty zależności gdzie byl mouseover, ale twój sposób jest lepszy.

---

Powinno być bardziej e.currentTarget, zamiast e.target. Czemu mouseover, a nie mouseenter?

---

I wtedy wskazuje rodzica? Czemu mouseover nie wiem w sumie bez powodu. A co lepsze mouseenter?

---

currentTarget wskazuje na element, do którego przypisany jest event. Co do mouseover/mouseneter - https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event w przykładzie jest ładnie wyjaśnione

---

O dzięki wielkie.