Блог

Главная - Вопросы по программированию - Vue: могут ли данные слота вернуться к родителю, чтобы передать реквизит?

Vue: могут ли данные слота вернуться к родителю, чтобы передать реквизит?

#vue.js #vuejs2 #vue-component

Вопрос:

У меня есть родительский компонент, использующий MyGrid компонент и заполняющий данные. Внутри MyGrid я проверяю item тип , и если это определенный тип, я даю ему класс typeSquare .
В интересах сохранения MyGrid «тупости», есть ли способ проверить тип, а затем MyGrid передать опору для класса?

Родитель

  <MyGrid
    :items="items"
    columnGap="12"
    rowGap="14"
   >
      <template v-slot="slotProps">
         <Cover
         v-if="slotProps.typename === 'NewOne'"
         :project="slotProps.item.data"
       />
         <Cover2 v-else-if="slotProps.typename != 'NewOne'" :project="slotProps.item.data"/>
   </template>
  </MyGrid>

myGrid.vue

 <template>
  <div :class="$style.root">
    <div :class="$style.gridContainer">
      <template v-for="(item, index) in items">
        <div
          :key="index"
          :class="[{ [$style.gridItem]: true }, { [$style.typeSquare]: item.typename === 'NewOne' }]"
          :style="{
            padding: `${columnGap}px ${rowGap}px`,
          }"
        >
          <slot :item="item"></slot>
        </div>
      </template>
    </div>
  </div>
</template>

Комментарии:

1. Итак, вы хотите передавать только объекты определенного типа из этого списка «предметов»?

Ответ №1:

Если ваша цель состоит в том, чтобы передавать только элементы, соответствующие определенным критериям, вы можете отфильтровать их с помощью вычисляемых свойств. В свой скрипт добавьте вычисляемый объект следующим образом

    computed:{
      filteredItems(){
        return this.items.filter(item=>item.typename === 'NewOne')
      }
    },

А после в вашем шаблоне вы можете передать вычисленное свойство вместо всего списка

  <MyGrid
    :items="filteredItems"
    columnGap="12"
    rowGap="14"
   >
Метки: ,